Question

当我单击按钮时，我想更改>>> 1st_str = "shoes, 12, 29.99" >>> split_str = 1st_str.split(',') >>> split_str ["shoes", "12", "29.99"] >>> split_str[0] 'shoes' >>> split_str[1] '12' >>> split_str[2] '29.99'中的innerHTML。我不知道为什么，但是它不会出现错误或获得预期的结果，而是删除了内容并替换为div。

我如何使它工作？

"[object Object]"

Answer 1

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

要使类成为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>
    );
  }
}

Answer 2

您可以使用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;

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

2 个答案: