如何将 setState 传递给子组件，以便当父组件更改时子组件也会更改？

Question

我试图在这里举一个最简单的例子。 当您选中该框时，父文本 Text #1 会在“true”和“false”之间来回交替，而子文本 Text #2 则不会改变。 我希望文本 #2 能够像文本 #1 一样进行更改。

function Parent(props) {
    const [state1, setState1] = useState(true);
    const [currentView, setCurrentView] = useState(<Child checkHandler={checkHandler} state1={state1} />);
    function checkHandler(event) {
        setState1(event.target.checked);
    }
    return (
        <div>
            Text #1: {state1 ? "true" : "false"}
            {currentView}
        </div>
    );
}

export default Parent;

function Child({
    state1,
    checkHandler
}) {
return (
    <div>
        Text #2: {state1 ? "true" : "false"}
        <form>
            <input type="checkbox" id="checkbox" onChange={checkHandler} />
            <label for="checkbox">Check</label>
        </form>
    </div>
  );
}

export default Child;

我搜索过类似的答案，但我找不到任何关于如何做我认为在 React 中要做的非常基本的事情的简单解释。

Answer 1

组件实例几乎不应该被放入状态，因为这样它们的 props 和自己的状态就不会自然更新。每当父级重新渲染时，您都需要调用

<Child checkHandler={checkHandler} state1={state1} /

，以便当父级值更改时，子级可以使用新的 props 重新渲染。

默认情况下，该复选框也不会被选中，但您会这样做

const [state1, setState1] = React.useState(true);

- 最好保持一致。考虑向子级添加

checked

属性。

function Parent(props) {
    const [state1, setState1] = React.useState(true);
    function checkHandler(event) {
        setState1(event.target.checked);
    }
    return (
        <div>
            Text #1: {state1 ? "true" : "false"}
            <Child checkHandler={checkHandler} state1={state1} />
        </div>
    );
}

function Child({
    state1,
    checkHandler
}) {
return (
    <div>
        Text #2: {state1 ? "true" : "false"}
        <form>
            <input type="checkbox" id="checkbox" onChange={checkHandler} checked={state1} />
            <label htmlFor="checkbox">Check</label>
        </form>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<Parent />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 2

不需要将整个组件置于状态中——它也不起作用。只需将状态变量作为子项的道具即可。

function Parent(props) {
  const [state1, setState1] = useState(true);
  function checkHandler(event) {
    setState1(event.target.checked);
  }
  return (
    <div>
      Text #1: {state1 ? "true" : "false"}
      <Child checkHandler={checkHandler} state1={state1} />
    </div>
  );
}

export default Parent;

function Child({ state1, checkHandler }) {
  return (
    <div>
      Text #2: {state1 ? "true" : "false"}
      <form>
        <input type="checkbox" id="checkbox" onChange={checkHandler} />
        <label for="checkbox">Check</label>
      </form>
    </div>
  );
}

export default Child;