javascript - 如何将属性从反应组件传递给其父级？

Question

我正在创建一个包含多个部分的“演示”组件，每个部分都是动态呈现的。

在包含所有不同子项的父组件中，我希望禁用每个部分的“下一步按钮”，直到满足特定条件。该按钮位于父组件中。

此组件不传递属性：

孩子一例：

export function ChildOne() {
const [condition, setCondition] = useState(false);
    return (
      <div>
        <button onClick={() => setCondition(true)}>
          hello world
        </button>
      </div>
    );
}

家长：

import ChildOne, condition from "../child-one"

export default function Parent() {
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}

我不确定如何从子组件传递条件属性，以便我可以在父组件中使用它。此外，这种方法是反模式吗？我可以根据子组件的值以另一种方式有条件地禁用父组件中的按钮吗？

谢谢你。

标签： javascriptreactjsreact-nativereact-hooks

Answer 1

试试这个方法

孩子：

export function ChildOne({setCondition}) {
    return (
      <div>
        <button onClick={() => setCondition(true)}>
          hello world
        </button>
      </div>
    );
}

家长：

import {ChildOne} from "../child-one"

export default function Parent() {
const [condition, setCondition] = useState(false);
return(
   <div className="childRenderer">
      {page == 1 && (
        <ChildOne setCondition={setCondition} />
      )}
   </div>
   <button isDisabled={condition}>Next</button>
 );
}