Question

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

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给你的

反应循环组件通信

1 个答案: