在两个组件 reactjs 之间进行通信

Question

我正在制作一个 Web 应用程序，我打算使用 reactjs 使其尽可能模块化。

该应用程序由一个 menu 和一个关联的购物 cart 组成，它跟踪将哪些物品从 menu 放入 cart。

我的代码是：

React.render(
                <div className="row">
                <div className="col-md-7">
                    <MainMenu />
                </div>
                <div className="col-md-4">
                <CartView />
                </div>
                </div>
   , mountpoint
    );

可见，我的这两个组件之间并没有层级关系，显然无法通过props进行通信。

我阅读了 React 官方文档：

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this

但是，我目前不想在我的应用程序中使用 Flux。

那么，我的问题是：

有没有什么方法可以在不使用 Flux 的情况下在组件之间建立消息传递系统？

P.S：我知道jQuery。我无法理解 Flux 网站上给出的 ToDo 示例，所以我想知道是否有其他方法可以做到这一点。

谢谢。

Answer 1

是的，你可以在没有 Flux 的情况下做到这一点。但考虑一下 Flux，因为它很棒。

但是如果你不想用它，为什么不让它们有等级关系呢？

您执行此操作的方法是创建一个新的根级组件，您将其挂载，然后将 <MainMenu /> 和 <CartView /> 组件作为子组件。为这些子组件上的事件提供回调然后父级可以绑定到以更改其状态，这会影响传递的道具。

使用您的代码作为基础的示例：

var Root = React.createClass({

    getInitialState: function() {
        return {
            itemId: 1
        }
    },

    mainMenuChangeHandler: function(itemId) {
        if (itemId !== this.state.itemId) {
            this.setState({
                itemId: Number(itemId)
            })
        }
    },  

    render: function() {
        return (
            <div className="row">
                <div className="col-md-7">
                    <MainMenu onChange={this.mainMenuChangeHandler} />
                </div>
                <div className="col-md-4">
                    <CartView itemId={this.state.itemId}  />
                </div>
            </div>
        )
    }
});

var MainMenu = React.createClass({
    propTypes: {
        onChange: React.PropTypes.func.isRequired
    },
    clickHandler: function(e) {
        e.preventDefault();
        this.props.onChange(e.target.href);
    },
    render: function() {
        return (
            <div>
                <a href="1" onClick={this.clickHandler}>Item 1</a>
                <a href="2" onClick={this.clickHandler}>Item 2</a>
            </div>
        );
    }
});

var CartView = React.createClass({
    propTypes: {
        itemId: React.PropTypes.number.isRequired
    },
    render: function() {

        var item;
        if (this.props.itemId === 1) {
            item = (
                <div>This is Item 1 being shown</div>
            );
        } else if (this.props.itemId === 2) {
            item = (
                <div>This is Item 2 being shown</div>
            );
        }

        return (
            <div>{item}</div>
        );
    }
});

React.render(<Root />, mountpoint);

在两个组件 reactjs 之间进行通信

Communicate between two components reactjs

jquery

reactjs