警告：渲染方法应该是 props 和 state 的纯函数； 不允许从渲染触发嵌套组件更新

Question

**大家好，我有一个 react.js 应用程序，它必须根据点击链接制作三个不同的组件，第一个组件是注册表，第二个是登录表单，最后一个是幻灯片，默认情况下必须显示 s . 我的问题是，如果我单击登录，它会很好地显示表单，但会在控制台中显示此警告：“警告：渲染方法应该是道具和状态的纯函数；不允许从渲染触发嵌套组件更新。如有必要, 在 componentDidUpdate 中触发嵌套更新。

检查Header的render方法。 ”

如果有人能帮我弄清楚，我该如何去做，提前致谢。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import Signup from './Signup'; import Login from './Login'; import Entry from './Entry'; import Navbar from 'react-bootstrap/Navbar'; import Nav from 'react-bootstrap/Nav'; const Header = () => { const [action, setAction] = useState(""); if (action === "register") { const element = <Signup/>; ReactDOM.render(element, document.getElementById('main-root')); } if (action === "login") { const element = <Login/>; ReactDOM.render(element, document.getElementById('main-root')); } if(action === "default"){ const element = <Entry/>; ReactDOM.render(element, document.getElementById('main-root')); } return( <div> <Navbar id="navigarion" bg="dark" variant="dark"> <Nav> <Navbar.Brand href="#home">Navbar</Navbar.Brand> </Nav> <Nav> <Nav.Link href="#" onClick={() => setAction("register")}>Signup</Nav.Link> <Nav.Link href="#" onClick={() => setAction("login")}>Login</Nav.Link> <Nav.Link href="#" onClick={() => setAction("default")}>Logout</Nav.Link> </Nav> </Navbar> </div> ); }; export default Header;

**

Answer 1

你应该只在入口点调用ReactDOM.render一次，然后让它的子组件通过返回一个或其他 JSX 组件来决定有条件地渲染什么。 类似的东西：

const App = () => {
  const [action, setAction] = useState("");
  const element = action === "register"
    ? <Signup/>
    : action === 'login'
      ? <Login/>
      : <Entry/>; // if `default` is the only other option
  return (
    <>
      {element}
      .. other JSX, other components
    </>
  );
};
ReactDOM.render(<App />, document.getElementById('main-root'));