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

Question

当我单击按钮时，我想更改innerHTMLa div。我不知道为什么，但它没有收到错误，也没有得到预期的结果，而是将其删除到内容中并将其替换为"[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(Added n 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;

Answer 2

使用 React，您不必设置 innerHtml 来执行此操作，而是更典型的方法是在组件中拥有内部状态，并根据该状态有条件地渲染 SignIn 组件。要使用状态，组件要么需要是类，要么使用钩子，类更传统，所以我将组件更改为类。

\n\n

要使一个类成为 React 组件，您需要使用 React.Component 来扩展该类，这是因为 React 组件有很多内部行为，您需要将这些行为包含在类中才能将其视为组件。

\n\n

所以

\n\n

class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      signIn: false,\n    };\n\n    this.LoginOnClick = () => {\n      this.setState({ signIn: true });\n    };\n  }\n\n  render() {\n    if (this.state.signIn) {\n      return (\n        <div className="container">\n          <SignIn />\n        </div>\n      );\n    }\n\n    return (\n      <div className=\xe2\x80\x9ccontainer\xe2\x80\x9d>\n        <button onClick={this.LoginOnClick}>Login</button>\n        <Login />\n      </div>\n    );\n  }\n}\n

\n