javascript - 如何使用 React 更改元素的 innerHTML？

Question

当我单击按钮时，我想更改 div 的 innerHTML 。我不知道为什么，但它没有收到错误，也没有得到预期的结果，而是删除内容并将其替换为 "[object Object]"。

我怎样才能让它工作？

import React from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';

import './App.css';

function App() {
  function LoginOnClick(){
    document.getElementById("wrapper").innerHTML = <SignIn />;
  }
  return (
    <div className="container" id="wrapper">
      <button onClick={LoginOnClick}>Login</button>
      <Login />
    </div>
  );
}

export default App;

Answer 1

您可以使用Hooks (React 16.8 中添加)。

import React, {useState} from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';

import './App.css';

function App() {
  const [signIn, setSignIn] = useState(false); 
  return (
    <div className="container" id="wrapper">
      {signIn ? <SignIn /> : <> //This is React Fragments syntax
      <button onClick={() => setSignIn(true)}>Login</button>
      <Login />
      </>
      }
    </div>
  );
}

export default App;