javascript - react : Using parent to pass data between sibling components

Question

我需要呈现一个 widget，它从 SettingsPanel 获取设置并将它们传递给 LayoutPanel(然后将重新呈现本身基于更新的设置)。我似乎无法想出一种“干净”的方法来做到这一点。这是我到目前为止所拥有的:

小部件.js

class Widget extends Component {
    handleSettingsChange() {
        //need to let layout know of change
    }

    render() {
        <div>
            <SettingsPanel
                onSettingsChange={handleSettingsChange}
                initialSettings={this.props.settings}
            />
            <Layout
                data={ this.props.data}
            />
        </div>
    }
}

App.js

const settings = {
    hideImages: true,
    itemsPerPage: 5
}
<Widget settings={ settings } data={ data } />

我的第一个想法是，在 Widget 中，我可以做

constructor() {
    super()
    this.setState({ settings: this.props.settings });
}
handleSettingsChange(data) {
    //Assuming data is of the form {changedProperty: value}
    this.setState({ settings: Object.assign({}, this.state.settings, data) });
}
render() {
    <div>
        <SettingsPanel
            onSettingsChange={handleSettingsChange}
            initialSettings={this.props.settings}
        />
        <Layout
            data={ this.props.data}
            settings={ this.state.settings }
        />
    </div>
}

这样父级就是一个转储消息代理，并且不必知道正在更改哪些特定设置的细节。但当然，这是行不通的，因为，A。有人告诉我从 props 设置状态是一种反模式b.构造函数无论如何都无法访问 this.props，并且在其他地方(componentDidMount？)做它感觉不对。

我的第二个想法是转到 setProps 为来自父项的子项设置 Prop ，但当然这已被弃用。

我该如何解决这个问题？我可能会重新设计它，所以这不是问题，但坦率地说，我只是想了解我遗漏了什么，或者解决此类问题的“ react ”方式是什么。

This question与我遇到的问题类似，但我无法理解/应用公认的解决方案对我的问题提出的建议。

tldr; “如何让父组件将状态从一个子组件传递到另一个子组件，同时不知道它到底传递了什么？”

Answer 1

虽然 lukewestby 的回答是正确的，因为它解决了原始问题中的问题，但经过进一步思考后，我意识到这是一个错误的问题——也就是说，这是一个架构问题，这就是为什么我在实现时遇到问题.

在这种情况下，数据流是 [data]-> App -> Widget -> Children。 “App”获取数据，因此 App 拥有它。小部件不应该能够修改、处理对其不拥有的数据的更改。因此，回调需要传递给祖父级(App)，而不是父级(Widget)。这就是我最终所做的。

App.js

 constructor() {
   this.state = { settings: { hideImages: true } };
 }
 handleSettingsChange(data) {
   this.setState({ settings: data });
 }
 render() {
   <Widget settings={ this.state.settings } 
      onSettingsChange={ this.handleSettingsChange }
    />
} 

小部件.js

handleDisplaySettingsChange(data) {
    this.props.onSettingsChange(data);
}
render() {
    return (
        <div>
            <SettingsPanel
                onSettingsChange={ this.handleDisplaySettingsChange }
            />
            <Layout
                {...this.props.settings }
            />
        </div>
    );
}

这样做的好处是设置有一个单一的真实来源，由所有者(应用程序)维护。在最初的建议中，如果稍后通过 App 获取设置已更改，内部组件将不会收到它(这解释了为什么 React 文档声称从 props 设置状态是一种反模式)