ReactJS两个组件进行通信

JavaScript

L路易

2020-03-10

我刚开始使用ReactJS，但对我遇到的问题有些困惑。

我的应用程序本质上是一个带有过滤器的列表和一个用于更改布局的按钮。目前我使用的三个组成部分：<list />，< Filters />和<TopBar />，现在很明显，当我更改设置，在< Filters />我想引起一些方法<list />来更新我的看法。

如何使这三个组件相互交互，或者我需要可以对其进行更改的某种全局数据模型？

第436篇《ReactJS两个组件进行通信》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

Mandy逆天 2020.03.10

奇怪的是没有人提到mobx。这个想法类似于redux。如果我有一个已订阅了多个组件的数据，则可以使用此数据来驱动多个组件。

前端卡卡西米亚 2020.03.10

以下代码可帮助我设置两个同级之间的通信。设置是在render（）和componentDidMount（）调用期间在其父级中完成的。它基于https://reactjs.org/docs/refs-and-the-dom.html 希望对您有所帮助。

class App extends React.Component<IAppProps, IAppState> {
    private _navigationPanel: NavigationPanel;
    private _mapPanel: MapPanel;

    constructor() {
        super();
        this.state = {};
    }

    // `componentDidMount()` is called by ReactJS after `render()`
    componentDidMount() {
        // Pass _mapPanel to _navigationPanel
        // It will allow _navigationPanel to call _mapPanel directly
        this._navigationPanel.setMapPanel(this._mapPanel);
    }

    render() {
        return (
            <div id="appDiv" style={divStyle}>
                // `ref=` helps to get reference to a child during rendering
                <NavigationPanel ref={(child) => { this._navigationPanel = child; }} />
                <MapPanel ref={(child) => { this._mapPanel = child; }} />
            </div>
        );
    }
}