react.js在多级组件内部支持道具和状态

Question

我有一个应用程序，其组件结构如下所示。 组件应用程序主要父级使用{this.props.children}在所有组件中加载标头 组件头 组件主页 组件仪表板 组件数据 组件DataLoad

App包含传递一些状态变量的渲染中的标题。 Home包含Dashboard，其中包含更新App的状态变量以更新Header的操作。 数据包含DataLoad也从这里我需要更新App的状态变量来更新Header。

{{1}}

Answer 1

如果我理解您的问题，您希望将this.showHideSearch功能从您的App组件传递到this.props.children - 您的主页组件中的组件。

这很容易使用：

React.cloneElement(this.props.children, {showHideSearch: this.showHideSearch});

将其放在this.props.children的位置。

来源 - https://stackoverflow.com/a/35102287/6621973

编辑：要更新父级的状态，只需传递一个函数，将状态从父级设置为子级。如果Google“反应更改父状态”有几个示例，例如：How to update parent's state in React?