在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ React子組件如何高效改變兄弟組件的狀態(tài)？

React子組件如何高效改變兄弟組件的狀態(tài)？

我在父組件傳遞了一個modalShowDom到子組件Sign組件中，用于管理三個彈窗的狀態(tài)（顯示/隱藏），如：

/*Sign組件*/
<Signup modalShowDom={this.props.modalShowDom === 'signup'? 'ui-modal-show' : ''} />
<Signin modalShowDom={this.props.modalShowDom === 'signin'? 'ui-modal-show' : ''} />
<Signout modalShowDom={this.props.modalShowDom === 'signout'? 'ui-modal-show' : ''} />

但這個組件中有關閉按鈕，我的想法是從父組件傳進來modalShow方法，點擊關閉按鈕調(diào)用

<Signup modalShow={this.props.modalShow} modalShowDom={this.props.modalShowDom === 'signup'? 'ui-modal-show' : ''} />
<Signin modalShow={this.props.modalShow} modalShowDom={this.props.modalShowDom === 'signin'? 'ui-modal-show' : ''} />
<Signout modalShow={this.props.modalShow} modalShowDom={this.props.modalShowDom === 'signout'? 'ui-modal-show' : ''} />

但顯示隱藏的狀態(tài)是由兄弟組件Header控制的：
于是我在將父組件的modalShow方法也傳給了Header

<div className='app'>
        <Header modalShow={this.modalShow} />
        <Sign modalShow={this.modalShow} modalShowDom={this.state.modalShowDom}/>
</div>

Header和Sign都可以來控制Sign的狀態(tài)了，
功能雖然是實現(xiàn)了，但感覺這個邏輯很麻煩，每次都要通過父組件來處理狀態(tài)，如果邏輯多了傳入的參數(shù)也多，可讀性也不太好吧

回答
編輯回答
情已空

不用redux之類的全局狀態(tài)管理的話：

父組件維護這樣一個狀態(tài)

this.state = {
    modal: {
        show: false,
        type: '' // signin/signup/signout
    }
}

并且提供兩個方法

showModal = type => {
    this.setState({modal: {show: true, type}});
}

hideModal = () => {
    this.setState({modal: {show: false}});
}

給Header傳遞需要的方法過去，如顯示登錄頁面

this.props.showModal('signin');

針對Sign組件，直接用modal.show控制是否顯示，用modal.type控制顯示哪個，如：

{modal.show &&
<Sign type={modal.type} />
}
render() {
    const {type} = this.props;
    return (
        {type === 'signin' &&
        <Signin />
        }
    )
}
2018年9月20日 15:26