如何访问 React 元素的innerHTML？

Question

我有一个函数，我想返回一些 HTML，但是当我调用该函数或记录它时，它会返回未定义的变量：

  contentForRender = () => {

    const el = (

      <div><span>Lorem Ipsum</span></div>

    );

    return el;

  }

  componentDidUpdate(prevProps, prevState, prevContext) {

    const el = this.contentForRender();

    console.log('el', el);

    console.log('el_inner', el.innerHTML);

    // do something with el.innerHTML

  }

当我注销时，componentDidUpdate 中的“el”变量是typeOf: Symbol(react.element)，el.innerHTML 是undefined。

有没有不同的方法来获取 React 元素的innerHTML？

我尝试过使用 refs，但由于我对 React 还很陌生，我不确定我是否正确地执行了它，并且无法想到为什么它不起作用。任何帮助将非常感激！

Answer 1

ReactJS 不公开原始浏览器 DOM，而是有自己的 DOM 接口。出于性能和安全原因，该HTMLElement接口的 ReactJS 等效项没有innerHTML属性（因为您不应该使用它！）。得到innerHTML（或者更确切地说outerHTML）：如果您想要 ReactJS DOM 对象的 HTML 字符串表示形式，那么您需要使用renderToString. 请注意，这实际上会生成等价的outerHTML，而不是innerHTML：import { renderToString } from 'react-dom/server'componentDidUpdate(prevProps, prevState, prevContext) {&nbsp; &nbsp; const el = this.contentForRender();&nbsp; &nbsp; console.log('el', el);&nbsp; &nbsp; console.log('el_inner', renderToString( el ) );}设置innerHTML：https://reactjs.org/docs/dom-elements.htmldangerouslySetInnerHTML是 React 的替代品，用于innerHTML在浏览器中使用 DOM。一般来说，从代码设置 HTML 是有风险的，因为很容易无意中使用户遭受跨站点脚本 (XSS) 攻击。因此，你可以直接从 React 设置 HTML，但你必须输入dangerouslySetInnerHTML并传递带有键的对象__html，以提醒自己这是危险的。

Answer 2

Refs提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。在您的情况下，您应该ref向您的内容添加 prop 并在以下位置引用它componentDidUpdate：constructor(props) {  super(props);  this.contentRef = React.createRef();}componentDidUpdate(prevProps, prevState, prevContext) {  const el = this.contentRef.current;  console.log('el', el);  console.log('el_inner', el.innerHTML);  // do something with el.innerHTML}render() {  return <div ref={this.contentRef}><span>Lorem Ipsum</span></div>;}