如何在react-data-table-component中展示API返回的原始HTML

要解决HTML以纯文本显示的问题，只需修改列配置，利用组件的自定义单元格渲染能力结合React的dangerouslySetInnerHTML解析HTML内容：

1. 修改列配置
   将原配置中的selector替换为cell属性，返回包含dangerouslySetInnerHTML的React元素：

   const columns = [
     { 
       name: 'status', 
       cell: row => <div dangerouslySetInnerHTML={{ __html: row.status }} /> 
     }
   ];
   

2. 原代码问题说明
   之前使用的selector仅返回字符串，react-data-table-component会直接将其作为纯文本渲染；而cell属性允许返回自定义React节点，通过dangerouslySetInnerHTML可让React解析并渲染传入的HTML内容。

3. 安全注意事项
   dangerouslySetInnerHTML会直接渲染原始HTML，若API返回内容不可信（含恶意脚本），存在XSS攻击风险。如需处理不可信内容，建议先用HTML净化库（如DOMPurify）过滤后再渲染：

   import DOMPurify from 'dompurify';
   
   const columns = [
     { 
       name: 'status', 
       cell: row => <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(row.status) }} /> 
     }
   ];
   

内容的提问来源于stack exchange，提问作者Jeeva K