reactjs - 如何在react js中互相替换组件？

Question

登录组件中的onClick，我必须显示Home组件，而home组件中的onClick我必须显示登录组件。但出现此错误

Uncaught Error: Element type is invalid: expected a string (for built-in
components) or a class/function(for composite components) but got: object(...)

请帮我解决这个问题。

登录

handleSubmitValidateInput: function(e){
    e.preventDefault();
    ReactDOM.unmountComponentAtNode(document.getElementById('content'));
    ReactDOM.render(<Home UserDetails={data}/>, document.getElementById('content'));
}

首页

handleLogout: function(e){
    e.preventDefault();
    ReactDOM.unmountComponentAtNode(document.getElementById('content'));
    ReactDOM.render(<Login />, document.getElementById('content'));

但我可以在另一个组件中渲染两者。当我单击 Home 组件时，出现错误。

Answer 1

您绝对需要看看https://github.com/ReactTraining/react-router处理页面之间的导航。你不应该直接操作 DOM，因为这违背了 React 的做事方式，因为 React 使用虚拟 DOM 来保持状态与真实 DOM 同步，但这超出了问题的范围。

唯一可以直接触摸 DOM 的时间是当您第一次渲染整个应用程序时。像这样的事情:

ReactDOM.render(<MyApp />, document.getElementById('content'));

对于任何其他 DOM 操作，请使用数据绑定(bind)，让 React 发挥其魔力。