如何访问 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) {

    const el = this.contentForRender();

    console.log('el', el);

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

}

设置innerHTML：

https://reactjs.org/docs/dom-elements.html

dangerouslySetInnerHTML是 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>;

}