Question

TestComponent的用法

 <TestComponent
   testContent= {
     <div>
       <p>sometxt <a href="#">link1</a><p>
       <p>hello how was your day</p>
       <p>some other txt <a href="#">link1</a><p>
     </div>
   }
 />

class TestComponent extends React.Component {
  constructor(props) {
    const testContent = props.testContent;
  }
}

在上面的组件代码中，在构造函数中，当我尝试访问props.testContent时。它的类型是反应元素。但是，我想查询内容以找到可聚焦元素e：g：在此示例中。由于prop值是react元素，因此无法使用querySelector（）。所以我需要将这个react元素转换为HTML元素。

任何人都可以帮助我知道如何实现这一目标。非常感谢任何帮助。

谢谢！

Answer 1

在您的示例中，还没有HTML元素（也称为DOM节点） - 在组件已装入DOM之前，这种情况不会存在。完成后，您可以使用ReactDOM.findDOMNode()（请参阅https://reactjs.org/docs/react-dom.html#finddomnode）或ref（请参阅https://reactjs.org/docs/refs-and-the-dom.html）来访问该元素。

您需要在componentDidMount或componentDidUpdate React生命周期方法中执行此步骤。（见https://reactjs.org/docs/react-component.html#componentdidmount）

如何将react元素转换为HTML

1 个答案: