javascript - React 渲染不同的组件

Question

假设我正在构建一个 React 应用程序，它通过以这种方式单击按钮(单击相同的按钮)来更改框内的内容:

Click 1: Component 1
Click 2: Component 2
Click 3: Component 3
Click 4: Component 1
Click 5: Component 2
Click 6: Component 3

因此，显而易见的方法是通过状态，并在渲染方法中根据状态呈现您想要的组件。但我不想重新渲染每个组件。也就是说，在单击按钮时，我只想让之前的组件不可见，并显示新元素。

这在简单的普通 HTML/CSS/JS 中很容易做到:

display:none;

但是在 React 中如何处理这个问题，为什么它会比正常情况下更好/更有效？

不一定要寻找完整的代码，更多的是了解要做什么。

提前致谢!

Answer 1

维护一个计数器作为一个状态并在每次点击时增加它，基于该值你可以有条件地向你的组件添加样式例如

 onClick={() => {
     this.setState((prevState) => (
            {counter: (prevState.counter + 1)%3)}
             )
    )}
 } 

然后在您需要在组件最外层 div 内部应用的组件样式中

<Component1 style={(this.state.counter == 0)? {display: 'block'}: {display: 'none'}}/>

在Component1中

render() {
    return <div style={this.props.style}>{/* Content Here */}</div>
}

此外，由于 React 维护一个用于更新的虚拟 DOM，因此它在呈现内容时更加高效和快速