Reactjs Onclick用另一个替换现有组件 - 示例

Question

做过任何一种情况，您应该用完全不同的组件替换现有的组件 - 例如手风琴。

<ComponentA /> (+ image) - click on this 
<ComponentB /> (- image) - 

我应该在这里使用状态吗？ 而且我应该在每个组件上都有独立的图像，但是如何处理将图像完全放置在同一位置。有关如何在这些组件之间进行通信的任何简单示例都会有所帮助。

Answer 1

是的，你需要使用状态来操纵组件的可见性。在渲染功能，你可以做这样的事情

render(){ 
    return this.state && this.state.showComponent1 ? <ComponentA /> :<ComponentB /> 
} 

，并在你的按钮onClick事件，你可以将它设置这样

onClick =() => this.setState({showComponent1: !this.state.showComponent1})