在 dangerouslySetInnerHtml 或类似内容中添加 React 组件

Question

我正在创建一个 Gatsby 站点，在运行一些 GraphQL 查询之后，我将一些 HTML 字符串传递给 React 组件。我已经能够使用 dangerouslySetInnerHtml、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

显然，我们不需要在这里使用 dangerouslySetInnerHtml，但我想使用一种将 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>