我试着在这里做一个最简单的例子。当你选中该框时，父文本文本文本#1从“true”到“false”来回交替，而子文本文本文本#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;我已经搜索了类似的答案，但我找不到任何地方一个简单的解释，如何做我认为这将是一个非常基本的事情要做的ReactRedux。
2条答案
按热度按时间ou6hu8tu1#
组件示例几乎不应该被置为状态，因为这样它们的属性和自己的状态就不会自然更新。每当父示例重新呈现时，你需要调用
<Child checkHandler={checkHandler} state1={state1} /，这样当父示例的值改变时，子示例可以用它的新属性重新呈现。默认情况下，该复选框也是不选中的，但是您执行了
const [state1, setState1] = React.useState(true);-最好保持一致。第一个
brvekthn2#
不需要将整个组件置于state中--这样做也不会起作用。只需将state变量作为prop提供给子进程即可。