单元格内容内的 HTML答案

【问题标题】：Html inside cell contents单元格内容内的 HTML
【发布时间】：2021-08-24 01:26:05
【问题描述】：

我正在尝试动态构建一个 html 字符串并将其显示在 reactJS 的 ag 网格内的单元格中。

对于我的例子：在我的函数文件中：

function myTestFunction(props)
{
myHtmlString=  "<span>a</span>";
myHtmlString +=  "--"
myHtmlString +=  "<span>b</span>";

return (
<div>
{myHtmlString}
</div>
)
};
export default myTestFunction

在我的主要 reactjs 文件中：

import MyTestFunction from myTestFunction;
...
{headername: "Test", field: 'test', cellRendererFramework:MyTestFunction}

但这是在 agggrid 的单元格内逐字打印字符串...即 <span>a</span>--<span>b</span>.

但我需要将其打印为 HTML 字符串。即它应该在单元格中打印 a--b 。请问我在这里缺少什么？

谢谢。

【问题讨论】：

标签： html reactjs ag-grid

【解决方案1】：

您可以使用html-react-parser 将 HTML 字符串转换为一个或多个 React 元素。

import parse from 'html-react-parser';

function myTestFunction(props) {
 myHtmlString=  "<span>a</span>";
 myHtmlString +=  "--"
 myHtmlString +=  "<span>b</span>";

 return (
  <div>
    {parse(myHtmlString)}
  </div>
 )
};
export default myTestFunction

Working example

【讨论】：

【解决方案2】：

例子：

function createMarkup() {
  return <div>Hey, <strong>you.</strong></div>;
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: createMarkup() }} />;
}

看这里
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

【讨论】：