你如何访问 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 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 中设置 HTML，但你必须输入 dangerouslySetInnerHTML 并使用 __html 键传递一个对象，以提醒自己这很危险。

Answer 2

Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。

在您的情况下，您应该将 ref 属性添加到您的内容中，并在 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>;
}