在片段内危险地反应SetInnerHTML

Question

我有一个用例，我需要在 React 中格式化一些文本并渲染 HTML。

这是我目前正在努力实现的一个例子：

import React, {Fragment} from "react";
import {renderToString} from "react-dom/server";

function FormatText(props) {
  const lines = props.children.split('\n');

  return lines.map((line, index) => (
    <Fragment key={index}>
      {line}{index !== lines.length - 1 && <br/>}
    </Fragment>
  ));
}

const content = {
  first: 'This is some text\nwith new\n\nline characters - 1',
  second: 'This is some text\nwith new\n\nline <strong>characters - <sup>2</sup></strong>',
};

function App() {
  return (
    <ol>
      <li>
        <FormatText>{content.first}</FormatText>
      </li>
      <li dangerouslySetInnerHTML={{
        __html: renderToString(<FormatText>{content.second}</FormatText>)
      }}/>
    </ol>
  )
}

正如你所看到的，我有一些content包含\\n字符和HTML。 调用renderToString函数会将 HTML 转换为编码字符，这意味着 HTML 未正确呈现。

有没有办法在反应片段中呈现 HTML。

理想情况下，我想做以下事情（但不是）：

function FormatText(props) {
  const lines = props.children.split('\n');

  return lines.map((line, index) => (
    <Fragment key={index} dangerouslySetInnerHTML={{__html: renderToString(
        <Fragment>
          {line}{index !== lines.length - 1 && <br/>}
        </Fragment>
      )}}>
    </Fragment>
  ));
}

Answer 1

• <Fragment>不会向 DOM 添加任何节点，因此you can't do dangerouslySetInnerHTML on it 。 它基本上是 React 提供的一项功能，当您需要从渲染中的 return 返回多个节点时，它可以避免向 DOM 添加额外的节点。 所以，如果真实的 DOM 上不存在某些东西，你就不能对它做任何事情。
• renderToString一般用在节点服务器上。 在进行服务器端渲染时，您希望将 html 从服务器发送到客户端。 所以，最好也避免renderToString 。

问题是，html 无法识别新行等的\\n 。它需要html标签。 使用FormatText方法很好，或者您可以简单地convert the \\n to br ，然后在<li>标签内使用危险的<li> 。

 const content = { first: 'This is some text\\nwith new\\n\\nline characters - 1', second: 'This is some text\\nwith new\\n\\nline <strong>characters - <sup>2</sup></strong>', }; function App() { return ( <ol> <li dangerouslySetInnerHTML={{ __html: content.first.replace(/\\n/g, "<br/>") }}/> <li dangerouslySetInnerHTML={{ __html: content.second.replace(/\\n/g, "<br/>") }}/> </ol> ) } ReactDOM.render(<App/>, document.getElementById("root"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script> <div id="root"></div>

希望能帮助到你。 如有任何疑问，请回复。

Answer 2

嗨，我想这是不可能的，将格式化的 html 传递到 DOm 的唯一方法是通过 dom 元素 DIV。

也许此链接可以帮助您或指向https://reactjs.org/docs/dom-elements.html