在危险地设置InnerHtml或类似物中添加反应组件

Question

我正在创建一个Gatsby网站，并在运行了一些GraphQL查询后，将一些HTML字符串传递到React组件中。我已经能够使用危险地SetInnerHtml，html-react-parser等来呈现这些。但是，我也想只在原始Markdown中编写组件标记并将它们标记为组件。

一个简单的例子是

import React from "react";

export default function App() {
  const RedDiv = () => {
    return <div style={{ color: "red" }}>This is a red div</div>;
  };

  const StringRedDiv = "<div style={{color: 'red'}}>This is a red div</div>";

  return (
    <div className="App">
      <RedDiv />
      <div dangerouslySetInnerHTML={{ __html: StringRedDiv }} />
    </div>
  );
}

CodeSandbox

[显然，我们不需要在这里使用危险的SetInnerHtml，但是我想使用一种采用HTML字符串并将其转换为React的方法来达到预期的效果（在这种情况下，两个div都具有红色文本）。

Answer 1

为此，您可以像这样使用react-html-parser：

import React from 'react';
import ReactHtmlParser from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = "<div style={{color: 'red'}}>This is a red div</div>";
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

附带说明，为了使dangerouslySetInnerHTML或ReactHtmlParser正常工作，必须使用有效的HTML属性。

例如，您的示例中的样式属性：

<div style={{color: 'red'}}>This is a red div</div>

应更改为：

<div style="color: red;">This is a red div</div>