将 state 从孩子传递给父母

Question

嗨，我刚开始使用 React，我遇到了传递状态的问题。 我可以将子 state 传递给父组件以有条件地渲染其他子组件吗？

Answer 1

在 React 中，您不能将 state 传递给父组件。 相反，使用回调 function 将更改通知父组件。

为此，在子组件的 props 中传递一个 function（在父组件中定义），并在发生变化时调用它。 父组件然后可以通过它们的道具通知（其他）子组件。

Answer 2

将 state 从子级传递给父级非常容易 - 您需要做的就是将 function 从父级传递给接收 state 的子级。

getState=(childState)=>{
//use state here
}

<>
  <customChild returnState={this.getState} />
<>

class customChild extends.... {

...
render{
<button onClick={this.props.returnState(this.state)}>Click Me!</button>
}

}

话虽这么说，理想情况下，您希望父级控制所有 state 值并仅将需要的值传递给子级。 当父 state 更改时，子项将重新呈现更改的项目。 这样，您的整个页面的状态都在一个位置以供调试。