你如何访问 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 接口。

出于性能和安全原因，ReactJS 等效HTMLElement接口没有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是 ReactinnerHTML在浏览器 DOM 中使用的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间将用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 设置 HTML，但你必须输入dangerouslySetInnerHTML并传递一个带有__html键的对象，以提醒自己这是危险的。