Question

我正在创建一个Web应用程序，我打算使用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文档中读到了：

用于两个没有组件的组件之间的通信亲子关系，您可以设置自己的全局事件系统。订阅componentDidMount（）中的事件，取消订阅 componentWillUnmount（），并在收到事件时调用setState（）。 Flux模式是安排此
的可能方式之一

但是，我目前不想在我的应用程序中使用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);

在两个组件之间进行反应

1 个答案: