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

Question

当我点击按钮时，我想要改变一个

的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;

- Laczkó Örs

---

innerHTML 必须设置为 string 值。相反，您正在将其设置为 *Object*。 - Tyler Roper

我们知道它不起作用...你不能将一个对象设置为innerHTML。你在应用程序中任何地方都不应该使用document.getElementById(id)。 - charlietfl

我应该如何修复它？ - Laczkó Örs

通过根据状态更改呈现的内容。 - charlietfl

Answer 1

您可以利用React 16.8中新增的Hooks功能。

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;

- ravibagul91

Answer 2

使用React，您无需设置innerHtml即可实现此操作。相反，更典型的方式是在组件中具有内部状态，并根据该状态有条件地呈现SignIn组件。要使用状态，组件需要是类或使用hooks，类更为传统，因此我将组件改为类。

要使类成为React组件，您需要使用React.Component扩展该类，这是因为React组件具有许多内部行为，您需要在其中包含您的类才能被视为组件。

所以

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      signIn: false,
    };

    this.LoginOnClick = () => {
      this.setState({ signIn: true });
    };
  }

  render() {
    if (this.state.signIn) {
      return (
        <div className="container">
          <SignIn />
        </div>
      );
    }

    return (
      <div className=“container”>
        <button onClick={this.LoginOnClick}>Login</button>
        <Login />
      </div>
    );
  }
}

- Olivier Wilkinson

---

抱歉，是的我已经编辑了代码，请现在再试一下并告诉我它是否仍然不能工作。 - Olivier Wilkinson

第33行：'LoginOnClick'未定义 no-undef - Laczkó Örs

哦，没错。现在就开始了。 - Olivier Wilkinson

第32行：'LoginOnClick'未定义 no-undef - Laczkó Örs

为什么要在构造函数中定义一个类的函数？ - WilliamNHarvey

Answer 3

这里有一个简单的方法：

import {useState} from "react";

const App = () => {
  const [txt, setTxt] = useState("");
  setTxt(<p> 'Lorem ipsum dummy text blabla.' </p>);

  return(
    <div>
      {txt}
    </div>
  )
}

export default App;

- Abdulhakim