react怎么通过点击事件来显示一个组件B

Question

A也是组件，现在希望添加一个点击事件，点击加载B组件

Answer 1

//render 方法内
{
    this.state.showMore ? <More /> : null
}

 < Item onClick={() => this.show() } >选项< /Item> 

//render 外声明
show() {
    this.setState({showMore : true})
}

补充

{
    this.state.showMore ? <More onClick={() => this.show() /> : null
}

 < Item onClick={() => this.show() } >选项< /Item> 

//render 外声明
show() {
    this.setState({showMore : true})
}

但是这样的话，你得有其他的逻辑能让More显示出来才行。

Answer 2

通过click控制more组建的visible就行了，比如

 <More visible={this.state.visible}/>
    < Item
        onClick={ ()=>{this.setState({visible:true})} }
    > 选项
    < /Item> 
    

至于覆盖就是css了。

Answer 3

...
css:
.more{
   //隐藏
}
.show.more{
 //显示并覆盖
}
...
js:
return (
        <More className={this.state.show?'show more':'more'}/>
        < Item
            onClick={(>{this.setState({show:true})}}
        > 选项
        < /Item>