ReactJS - 让兄弟姐妹通过事件进行交流

Question

当另一个兄弟姐妹发生事件时，我需要一个兄弟回应。这是父组件，它包含两个兄弟：

class ChatWindow extends Component {

    render() {
        return (
            <div className='ChatWindow'>
                <MessageList />
                <ChatBar onResize={this.handleChatBarResize.bind(this)} />
            </div>
        );
    }

    handleChatBarResize() {
        console.log('Chat bar resized');
        // Now I need to let MessageList know that the chat bar was resized
    }

}

调整聊天栏的大小后，handleChatBar()函数会在冒泡到ChatWindow后调用。然后，当调用MessageList时，我需要在handleChatBar()中触发事件，最好不使用任何全局变量。

Answer 1

简单的解决方案：

1. 在conatiner conponent中使用状态：state = { isChatBarResized : false }
2. 在handleChatBarResized()更改状态this.setState({ isChatBarResized : true })
3. 在渲染时，从州MessageList
传递给<MessageList isChatBarResized={this.state.isChatBarResized} />旗帜
4. 在MessageList.componentWillReciveProps()中检查标志是否已更改，然后执行您的操作。

不要忘记在完成任务后退回this.state.isChatBarResized。您可以引发父容器将捕获的事件并在此处更改此标志。