Javascript 在react表的单元格中将字符串呈现为html

我在用打字脚本。我在表中有一个列值

val desc = "<div><p>testing</p></div>"

我如何才能做到这一点？

您将不得不使用不安全、易受攻击的软件

let desc=“测试
”
// ...
//或在反应表单元格中
{
标题：Description{sortIcon}，
访问器：“描述”，
单元格：（{row}）=>
},

---

如果您信任HTML字符串的源，就可以这样做。它不应该是用户提供的输入。

这里您还有两个选择

其中一个主题是使用状态。我想推荐您使用“redux”

例如（使用纯反应状态）：

import React，{useState}来自“React”；
导出常量应用程序=道具=>{
const[desc，setDesc]=useState（“测试”
”）；
返回{desc}
}

另一个是innerHTML，通过：

import React，{useRef，useffect}来自“React”；
const desc=“测试”
”；
导出常量应用程序=道具=>{
const myRef=useRef（null）；
useffect（（）=>{
myRef.current.innerHtml=desc；//使用Refs
//或
document.getElementById（'myID'）。innerHTML=desc；//使用DOM
}, [])
返回{desc}
}

我已经更新了代码。如何在react table中使用它我已经用我的代码更新了这个问题我必须这样做：Cell:function renderDescription（row:any）{return（）}@PuneetMehta是的，对。您需要在React表V7中执行

row.row

。我已经更新了我的答案。您也可以使用

（{row}）

。

desc

被定义为

“测试”

（字符串）而不是

测试

（React元素）有什么原因吗？如果没有，只要去掉引号，你就会没事了。是的，这是有原因的。它将不仅仅是如此，它更像是对任何应用程序的描述

<Table
        data={data}
        headers={headers}
        searchable={true}
        searchPlaceholder={'Search Apps'}
        toolBarButtons={toolBarButtons}
      />



const headers = useMemo(
    () => [
      {
        Header: <LeftHeader>{checkbox}</LeftHeader>,
        accessor: 'Checkbox',
        disableSortBy: true,
      },
      {
        Header: <LeftHeader>Name {sortIcon}</LeftHeader>,
        accessor: 'Name',
      },
      {
        Header: <LeftHeader>Type {sortIcon}</LeftHeader>,
        accessor: 'Type',
      },
      {
        Header: <LeftHeader>Tenancy {sortIcon}</LeftHeader>,
        accessor: 'Tenancy',
      },
      {
        Header: <LeftHeader>Description {sortIcon}</LeftHeader>,
        accessor: 'Description',
      },
      {
        Header: <LeftHeader>Action</LeftHeader>,
        accessor: 'Button',
        disableSortBy: true,
      },
    ],
    [],
  )

    const data = useMemo(() => {
    return List.map((ap) => {
      const actionButton = (
        <Edit
          size={20}
          cursor={'pointer'}
          color={'#1E95DE'}
          onClick={() => setRedirectUrl(RouteConstants.Marketplace + '/' + ap.id)}
        />
      )
      checkbox = <input type={'checkbox'} onChange={(e) => handleInputChange(e, ap)} />;
      return {
        Checkbox: checkbox,
        Name: ap.stuName,
        Type: options.filter(e => e.value === ap.stuType).map(f => {
          return f.label
        }),
        Description: ap.studescription,
        Tenancy: titleCase(ap.stuTenancy),
        Button: actionButton,
      };
    })
  }, [List])

let desc = "<div><p>testing</p></div>"
// ...
<span dangerouslySetInnerHTML={{__html: desc}} />

// or in React Table Cell
{
  Header: <LeftHeader>Description {sortIcon}</LeftHeader>,
  accessor: 'Description',
  Cell: ({row}) => <span dangerouslySetInnerHTML={{__html: row.original.Description}} />
},

import React, {useState} from 'react';
export const App = props => {
   const [desc, setDesc] = useState('<div><p>testing</p></div>');
   return <element>{desc}</element>
}

import React, { useRef, useEffect } from 'react';
const desc = "<div><p>testing</p></div>";
export const App = props => {
   const myRef = useRef(null);
   useEffect(() => {
      myRef.current.innerHtml = desc; //using Refs
      //or
      document.getElementById('myID').innerHTML = desc; //using DOM
   }, [])
   return <element id="myId" ref={myRef}>{desc}</element>
}