javascript - react 。无法获取 DOM 中的组件元素

Question

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

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，Query selector 或 findDOMNode() 仅对挂载组件(即已放置在 DOM 中的组件)起作用。

如果您尝试在尚未安装的组件上调用此方法(例如在尚未创建的组件上调用 render() 中的 Query 选择器或 findDOMNode())异常将被抛出。

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

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

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

示例演示:demo