jquery - 两个组件之间通信reactjs

Question

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

该应用程序包含 menu以及相关购物cart ，它跟踪哪些项目被放入 cart来自menu 。

我的代码是:

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 的情况下在组件之间建立消息传递系统？

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

谢谢。

Answer 1

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

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

执行此操作的方法是创建一个安装的新根级别组件，然后该组件具有 <MainMenu />和<CartView />作为 child 的组件。为这些子组件上的事件提供回调然后父级可以绑定(bind)以更改其状态，这会影响传递的 Prop 。

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

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);