【问题标题】:Not able to parse html tags in DataTable row data无法解析 DataTable 行数据中的 html 标签
【发布时间】:2019-04-11 06:20:32
【问题描述】:

我在单个元素中为 DataTables 的每个单元格获取 HTML 标记。 我也想解析 HTML 标签,但到现在为止,还做不到。

我已经尝试过 html-react-parser 但它正在将它们解析成一个数组。

import Parse from "html-react-parser";

<Table className={classes.table}>
        <TableHead>
          <TableRow>
            {/* <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell> */}
            {props.tableData.HeadingData.map(el=>{
              return <TableCell align="right">{el}</TableCell>
            })}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow>
              {/* <TableCell align="right">{row}</TableCell> */}
              {row.map(el=>{
                console.log(Parse(el));
                return <TableCell align="right">{Parse(el)}</TableCell>
              })}
            </TableRow>
          ))}
        </TableBody>
      </Table>
"content":{
                "Title": "List Title",
                "HeadingData" :["Name", "Company", "City", "State"],
                "RowData" :[
                    ["Joe James", "Test Corp<br/>TestCorp", "Yonkers", "NY"],
                    ["John Walsh", "Test Corp", "Hartford", 1989],
                    ["Bob Herm", "Test Corp", "Tampa", "FL"],
                    ["James Houston", "Test Corp", "Dallas", "TX"],
                ]
            },

上面是表格数据,如果您看到公司有 html 标签“Test Corp
TestCorp”。

我无法解析它,因为它正在返回一个数组。

【问题讨论】:

    标签: reactjs datatables html-react-parser


    【解决方案1】:

    我找到了解决方案。 通过html-react-parser解析之前将每个单元格元素转换成字符串来解决。

    【讨论】:

    • 此解决方案适用于我的带有 Material ui 的自定义表格,因为我能够访问单个元素。
    • 是否可以在 mui-datatables 的单个元素中解析 html 标签?
    猜你喜欢
    • 2013-04-21
    • 2022-11-16
    • 1970-01-01
    • 2021-10-07
    • 2013-06-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-11-27
    相关资源
    最近更新 更多