React循环组件通信

Question

假设我有一个循环，它在每次迭代中呈现两个组件。告诉Component1 (并将数据传递给它，重新呈现Component1) Component2被点击的最有效方法是什么？即：

render(){
    return (
        this.props.data.map((data) => {
            <Component1 data={data} />
            <div>
                <Component1> // this one should also know Component2 changed
            </div>
            <Component2 data={data} click={doSomethingWithComponent1} />
        })
    );
}

Pubsub不是我可以使用的解决方案。

Answer 1

宽泛的问题。有两种可能的答案，a)传递一个函数并使用父函数包装，b)使用Flux。

使用Flux，您可以让Component2触发一个操作，让存储知道数据已经更改，因此侦听该存储的所有组件都将自动更新。

下面是如何通过传递函数和包装父函数来完成此操作的：

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

var Goodbye = React.createClass({
    render: function() {
        return <div>Goodbye {this.props.name} <p onClick={this.props.clickMe}>Click me!</p></div>;
    }
});

var Parent = React.createClass({
    getInitialState: function () {
        return {
            name: 'Unknown user'
        };
    },
    passMe: function () {
        this.setState({name: 'User with name!'});
    },
    render: function() {
        return (<div>
            <Hello name={this.state.name} />
            <Goodbye name={this.state.name} clickMe={this.passMe} />
        </div>);
    }
});

这是给你的Fiddle playground