时间戳

首页 > 解决方案 > 用 setTimeout 反应 innerHTML

javascript - 用 setTimeout 反应 innerHTML

问题描述

我正在尝试渲染文本，然后在几秒钟后，更改 React 中文本的内容。

所以我尝试的是h1在我的代码中有一个简单的，然后在componentDidMount（正确的地方？）做一个简单的：

const node = document.querySelectorAll('#header')[0];
setTimeout(() => {
  node.innerHTML = 'second text';
}, 3000);

然后在render方法中：

render() {
  return (
    <h1 id="header">test</h1>
)};

我收到一个错误：

无法设置未定义的属性 innerHTML

我用谷歌搜索了一下，发现了一些关于 a 的东西dangerouslySetInnerHTML，但我真的看不出它与这个简单的例子有什么关系。有什么建议么？

标签： javascriptreactjs

解决方案

我的意思是，如果你使用 React，你应该放弃原始的 DOM 操作（除了少数情况），这通常是个坏主意。

另外，您可以使用 react 声明性模式轻松地做到这一点：

class YourComponent extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      text: 'my text'
    };
  }

  componentDidMount () {
    setTimeout(() => {
      this.setState({ text: 'my updated text' });
    }, 3000);
  }

  render () {
    return <h1>{this.state.text}</h1>;
  }
};

推荐阅读