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

单击按钮时，我想更改

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;

从“React”导入React；
从“./components/Login.js”导入登录名；
从“./components/SignIn”导入登录；
导入“/App.css”；
函数App（）{
函数LoginOnClick（）{
document.getElementById（“包装器”）.innerHTML=；
}
返回(
登录
);
}
导出默认应用程序；

使用react，您不必设置innerHtml来执行此操作，相反，更典型的方法是在组件中设置内部状态，并根据该状态有条件地呈现SignIn组件。要使用state，组件需要是类或者使用钩子，类更传统，所以我将组件更改为类

要使类成为react组件，您需要使用react.component扩展类，这是因为react组件有许多内部行为，您需要将它们包含在类中，以便将其视为组件

所以

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
签名：错，
};
this.LoginOnClick=（）=>{
this.setState（{signIn:true}）；
};
}
render（）{
如果（此.state.sign）{
返回(
);
}
返回(
登录
);
}
}

使用react，您不必设置innerHtml来执行此操作，相反，更典型的方法是在组件中设置内部状态，并根据该状态有条件地呈现SignIn组件。要使用state，组件需要是类或者使用钩子，类更传统，所以我将组件更改为类

要使类成为react组件，您需要使用react.component扩展类，这是因为react组件有许多内部行为，您需要将它们包含在类中，以便将其视为组件

所以

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
签名：错，
};
this.LoginOnClick=（）=>{
this.setState（{signIn:true}）；
};
}
render（）{
如果（此.state.sign）{
返回(
);
}
返回(
登录
);
}
}

您可以使用（添加了n React 16.8）

import React，{useState}来自“React”；
从“./components/Login.js”导入登录名；
从“./components/SignIn”导入登录；
导入“/App.css”；
函数App（）{
const[signIn，setSignIn]=使用状态（false）；
返回(
{sign？：//这是React片段语法
setSignIn（true）}>登录
}
);
}
导出默认应用程序；

您可以使用（添加了n React 16.8）

import React，{useState}来自“React”；
从“./components/Login.js”导入登录名；
从“./components/SignIn”导入登录；
导入“/App.css”；
函数App（）{
const[signIn，setSignIn]=使用状态（false）；
返回(
{sign？：//这是React片段语法
setSignIn（true）}>登录
}
);
}
导出默认应用程序；

innerHTML

必须设置为

字符串

值。相反，您将其设置为

对象

。您最好阅读一下react组件是什么以及JSX是如何工作的<代码>不是HTML我们知道它不起作用……您不能将对象设置为innerHTML。您不应该在应用程序中的任何位置使用

文档。getElementById（id）

我应该如何修复它？通过更改基于状态呈现的内容

innerHTML

必须设置为

字符串

值。相反，您将其设置为

对象

。您最好阅读一下react组件是什么以及JSX是如何工作的<代码>不是HTML我们知道它不起作用……您不能将对象设置为innerHTML。您不应该在应用程序中的任何位置使用

document.getElementById（id）

我应该如何修复它？通过更改基于状态的渲染内容谢谢！但是我得到了这个错误：第8行：解析错误：意外的标记，预期“；“对不起，是的，我编辑了代码，现在再试一次，如果它仍然不能工作，请告诉我。第33行：'LoginOnClick'没有定义。不，是的。它现在在第32行：“LoginClick”没有定义不，谢谢！但是我得到了这个错误：第8行：解析错误：意外的标记，预期“；“对不起，是的，我编辑了代码，现在再试一次，如果它仍然不能工作，请告诉我。第33行：'LoginOnClick'没有定义。不，是的。它现在位于第32行：“LoginClick”未定义无未定义

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>
    );
  }
}

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;