Html 内部单元格内容

Question

我正在尝试动态构建一个 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}

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

但我需要将其打印为 HTML 字符串 instead.i.e。它应该在单元格中打印 a--b 。请问我在这里遗漏了什么？

谢谢。

Answer 1

示例：

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

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

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

Answer 2

您可以使用 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

Html 内部单元格内容

Html inside cell contents

html

reactjs

ag-grid