在 React-Table 的单元格中将字符串呈现为 HTML

Question

我正在使用 TypeScript。在表格中，我有一个列值为

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

我希望在value中呈现为testing。 我正在使用

react-table

我尝试过new DOMParser().parseFromString("<div><p>testing</p></div>", "text/html")，但是报错：

Error: 在React子级中不允许对象（找到：[object HTMLDocument]）。 如果您想呈现一组子级，请改用数组

这是我的react-table代码:

<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])

我该如何实现这个目标？

- Harshit Thakurr

---

desc 被定义为字符串 "<div><p>testing</p></div>" 而不是 React 元素 <div><p>testing</p></div>，这样做有什么原因吗？如果没有，请删除引号，问题就会解决。 - 3limin4t0r

是的，有一个原因。它不仅仅是这个程度，而且像任何应用程序的描述。 - Harshit Thakurr

这个问题真的属于 react-table 吗？ - Arvind K.

Answer 1

您将需要使用 dangerouslySetInnerHTML，这是不安全的，容易受到 XSS 攻击的。

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}} />
},

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

- Ajeet Shah

---

我必须这样做：单元格：function renderDescription(row: any) { return (<span dangerouslySetInnerHTML={{ __html: row.row.original.Description }} />) } - Harshit Thakurr

@PuneetMehta 是的，没错。在React Table V7中，你需要使用row.row。我已经更新了我的答案。你也可以使用({row})。 - Ajeet Shah

Answer 2

在这里，你有另外两个选择。

其中之一是使用状态。我建议你使用 "redux"。

例如（使用纯React状态）：

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

另一个是通过Ref或DOM的innerHTML：

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>
}

- qafoori

---

我已经更新了代码。如何在 react-table 中使用它？ - Harshit Thakurr