React子组件如何高效改变兄弟组件的状态？

Question

我在父组件传递了一个modalShowDom到子组件Sign组件中，用于管理三个弹窗的状态（显示/隐藏），如：

/*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方法，点击关闭按钮调用

<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' : ''} />

但显示隐藏的状态是由兄弟组件Header控制的：
于是我在将父组件的modalShow方法也传给了Header

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

Header和Sign都可以来控制Sign的状态了，
功能虽然是实现了，但感觉这个逻辑很麻烦，每次都要通过父组件来处理状态，如果逻辑多了传入的参数也多，可读性也不太好吧

Answer 1

不用redux之类的全局状态管理的话：

父组件维护这样一个状态

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 />
        }
    )
}