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

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 selector 或 findDOMNode() 中调用的查询选择器仅适用于已安装的组件（即已放置在 DOM 中的组件）。

如果您尝试在尚未安装的组件上调用此方法（例如在尚未创建的组件上调用Query selector 或 render()中的findDOMNode()），则会引发异常。

您通常可以在 render() 中执行表达式，但是您无法访问 render() 中的 DOM 元素，因为它将 render() 中的元素放置到 DOM 中。

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

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

示例演示：演示