javascript - 以编程方式更改正在显示的 react 组件

Question

我正在尝试创建一个页面，该页面可以根据一对导航按钮来切换呈现哪个组件。页面是这样设置的

ReactDOM.render(<Logo/>, document.getElementById('logo'));
ReactDOM.render(<Upload/>, document.getElementById('main'));
ReactDOM.render(<NavButtons/>, document.getElementById('nav_buttons'))
ReactDOM.render(<Footer />, document.getElementById('footer'));

<Upload/> component 是我希望循环出去的那个。因此，当用户按下“下一步”导航按钮时，页面上就会加载一个不同的组件。

你如何处理这个问题？我是否正确地解决了这个问题？我是新来的 react 所以试图找出利用它的最佳方法。

最终针对不同的用例使用了以下两个答案。不过，两者都致力于实现这一目标。

Answer 1

您的用例可以通过在用户点击时更改父容器的内部状态并根据状态值检查要呈现的组件来呈现不同的子组件来实现。

既然你是新来的 react ，我什至不知道你是否明白这一点。在开始编写 React 代码之前，请阅读有关状态、 Prop 和生命周期的 React 文档。

https://reactjs.org/docs/state-and-lifecycle.html