单元格内容内的 HTML

Posted 2023-03-28

【中文标题】单元格内容内的 HTML

【英文标题】：Html inside cell contents

【发布时间】：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 。 请问我在这里缺少什么？

谢谢。

【参考方案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