代码之家  ›  专栏  ›  技术社区  ›  sme

让兄弟姐妹通过事件进行沟通

  •  0
  • sme  · 技术社区  · 6 年前

    我需要一个兄弟姐妹在另一个兄弟姐妹触发事件时做出响应。下面是父组件,它包含两个同级:

    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() 调用,最好不使用任何全局变量。

    1 回复  |  直到 3 年前
        1
  •  2
  •   Yossi    6 年前

    简单解决方案:

    1. conatiner组件中的使用状态: state = { isChatBarResized : false }
    2. 在…上 handleChatBarResized() 更改状态 this.setState({ isChatBarResized : true })
    3. 渲染时,传递到 MessageList 国家国旗: <MessageList isChatBarResized={this.state.isChatBarResized} />
    4. 在里面 MessageList.componentWillReciveProps() 检查标志是否已更改,然后执行您的操作。

    别忘了后退 this.state.isChatBarResized 在你完成你的东西之后。您可以引发父容器将捕获的事件,并在那里更改此标志。