在危险的LysetinerHTML或类似文件中添加React组件

我正在创建一个盖茨比网站，在运行一些GraphQL查询之后，我将一些HTML字符串传递给React组件。我已经能够使用危险的html、html react解析器等来呈现这些内容。但是，我也想在原始标记中编写组件标记，并将它们呈现为组件

一个简单的例子是

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>
  );
}

从“React”导入React；
导出默认函数App（）{
常数RedDiv=（）=>{
返回这是一个红色的div；
};
const StringRedDiv=“这是一个红色div”；
返回(
);
}

显然，我们不需要在这里使用危险的LySetinerHTML，但我希望使用一种方法来实现所需的效果（在本例中，两个div都有红色文本），该方法将HTML字符串转换为React

为此，您可以使用如下方法：

从“React”导入React；
从“react html parser”导入ReactHtmlParser；
类HtmlComponent扩展了React.Component{
render（）{
const html=“这是一个红色div”；
返回{ReactHtmlParser（html）}；
}
}

另一方面，为了使

危险的HTML

或

反应HTMLPasser

正常工作，必须使用有效的HTML属性

例如，示例中的“样式”属性：

这是一个红色的div

应改为：

这是一个红色的div

谢谢，这很有效！出于好奇，我在传递字符串

“

时也尝试了它，但似乎不起作用。你知道如何让它工作吗？我不认为这是可能的，因为你需要传递有效的HTML（不是JSX）字符串