如何将 SetState 变量传递给子组件，以便它在父组件发生变化时发生变化答案

【问题标题】：How to pass SetState variable to child component so that it changes when it changes in the parent如何将 SetState 变量传递给子组件，以便它在父组件发生变化时发生变化
【发布时间】：2022-11-26 11:34:36
【问题描述】：

我试着在这里举一个最简单的例子。当您选中该框时，父文本 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 Redux 中做的非常基本的事情的简单解释。

【问题讨论】：

标签： reactjs redux react-hooks react-redux

【解决方案1】：

无需将整个组件放入状态——它也不会工作。只需将状态变量作为道具提供给孩子即可。

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;

【讨论】：

【解决方案2】：

组件实例几乎不应该被放入状态，因为那样它们的属性和自己的状态就不会自然更新。每当父级重新渲染时，您需要调用 <Child checkHandler={checkHandler} state1={state1} /，以便当父级值更改时，子级可以使用其新道具重新渲染。

默认情况下也未选中该复选框，但您执行 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>

【讨论】：