Question

我试图为div容器 ed 插入innerHTML。但是在React渲染之后我无法得到它。我理解这是渲染阶段的问题，因为我为这个null容器得到了div。我做错了什么？

class Test extends React.Component {
  render() {
    return (
      <div> 
        <div id='ed'>
        <p>{this.props.prop.text}</p>
        </div> 
        {document.querySelector('#ed').innerHTML = this.props.prop[1]} // this the problem
      </div> 
    );
  }
}

ReactDOM.render(
  <Test prop={store.getState()} />,
  document.getElementById('root')
);

Answer 1

您的直接DOM操作无法工作，因为您在render（）中调用它。

您在render（）中调用了Query选择器， Query selector或findDOMNode（）仅适用于已安装的组件（即已放置在DOM中的组件）。

如果您尝试在尚未安装的组件上调用此方法（例如在尚未创建的组件上调用render（）中的查询选择器或findDOMNode（））将被抛出。

你通常可以在render（）中执行表达式，但是你无法访问render（）中的DOM元素，因为它将你的元素放在render（）中给DOM。

使用lifeCycle方法，您可以使用 ReactDOM.findDOMNode（this）来访问底层DOM节点。但访问DOM节点并像操作一样操作是违反React编程风格的。

查询选择器不一定是必要的，只需将ref附加到您想要的元素，并且您可以在react组件的任何函数内访问它。

示例演示：demo

Answer 2

尝试使用生命周期事件 componentDidMount

class Test extends React.Component {
  componentDidMount() {
    const element = document.querySelector('#ed');
    if (element) {
      element.innerHTML = this.props.prop[1]
    }
  }
  render() {
    return (
      <div> 
        <div id='ed'>
          <p>{this.props.prop.text}</p>
        </div> 
      </div> 
    );
  }
}

Answer 3

您需要等待组件装载。您可以将代码放在componentDidMount方法中来完成此操作。

componentDidMount() {
    document.querySelector('#ed').innerHTML = "woo"
}

您也可以使用ref={node => this.node = node}

引用容器div

反应。无法获取DOM中的组件元素

3 个答案: