Question

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

所以我尝试的是在代码中添加一个简单的h1，然后在componentDidMount（正确的位置？）中执行一个简单的操作：

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

，然后在render方法中：

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

我收到一个错误：

无法设置未定义的属性innerHTML

我在Google上进行了一些搜索，发现了关于dangerouslySetInnerHTML的一些信息，但是我真的看不到它与这个简单示例之间的关系。有什么建议吗？

Answer 1

我的意思是，如果您使用的是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>;
  }
};

Answer 2

通过处理原始DOM，您正在破坏React优化渲染的能力。在上述情况下，您可以轻松地从组件的状态中设置值，并在超时结束时调用setState

setTimeout(() => this.setState({text: 'second value'})) ... render () { return <h1>{this.state.text}</h1> }

如果您真的需要直接访问DOM元素，React提供了一个高级的ref属性，该属性将在创建元素时通过该元素，而不是使用查询选择器来遍历整个DOM。但是，在上述情况下无需这样做。

<h1 ref={(ref) => {this.h1Ref = ref}}>{this.state.text}</h1>

用setTimeout反应innerHTML

2 个答案: