你如何在反应中使用和改变innerHTML？

Question

我最近开始使用 react，其中大部分都可以创造奇迹，但我真的不明白你应该如何动态更改 html

这是我尝试创建的一些示例代码：

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

在反应中似乎几乎不可能做，这很奇怪，因为我觉得这些事情在反应中应该更容易。 你可以在这里运行代码

Answer 1

在 React 中，您只需修改state并且 DOM 会自动更新。 您的示例可能如下所示。 无需直接更新 html。

你也可以查看这个介绍 React 主要概念的介绍性教程。

 class ReactTypeWriter extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this); this.state = { text: ""}; } handleClick() { var i = 0; var txt = 'Lorem ipsum dummy text blabla.'; var speed = 50; let typeWriter = () => { if (i < txt.length) { this.setState({ text: txt.substring(0, i++) }); setTimeout(typeWriter, speed); } }; typeWriter(); } render() { return ( <div> <h1>Typewriter</h1> <button onClick={this.handleClick}>Click me</button> <p id="demo">{this.state.text}</p> </div> ) } } ReactDOM.render(<ReactTypeWriter />, document.querySelector("#app"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>