我无法在 ReactJS 的表格中添加按钮答案

【问题标题】：I can't add a button in a table in ReactJS我无法在 ReactJS 的表格中添加按钮
【发布时间】：2021-11-10 07:17:04
【问题描述】：

我想（查看）表格中的按钮，但出现此错误：

模块解析失败：在“...2021”附近解析时，JSON 中位置 165 的意外令牌 https://webpack.js.org/concepts#loaders SyntaxError: 在 '...2021" 附近解析时，JSON 中第 165 位的意外标记

这是IncomingMessagesTable.js：

import React, { useMemo } from 'react';
import { useTable } from 'react-table';
import { IncomingMessagesColumns } from './IncomingMessagesColumns';
import IncomingMessagesData from './IncomingMessagesData.json';
import '../Table.css'

export const IncomingMessagesTable = () => {
  const columns = useMemo(() => IncomingMessagesColumns, [])
  const data = useMemo(() => IncomingMessagesData, [])
  const tableInstance = useTable({
    columns,
    data
  })

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance

   return (
     <div>
          
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
    </div>
  );
}
onLoadMore = () => {
  this.setState({
    usersToShow: this.state.usersToShow + 1,
  });
};
export default IncomingMessagesTable;

这是IncomingMessagesColumns.json：

    export const IncomingMessagesColumns = [
  {
    Header : "اسم المرسل",
    accessor : "senderName"
  },
  {
    Header : "نوع المرسل",
    accessor : "senderType"
  },
  {
    Header : "عنوان الرسالة",
    accessor : "messageAddress"
  },
  {
    Header : "تاريخ الرسالة",
    accessor : "dateOfMessage"
  },
  {
    Header : "قراءة",
    accessor : "view",
  
  }
]

这是IncomingMessagesData.json：

[
  {
    "senderName": "أحمد",
    "senderType": "معلم",
    "messageAddress": "رسالة إلى أولياء أمور الطلاب",
    "dateOfMessage": "11/12/2021",
    "view": <button type="submit">عرض الرسالة</button>
  }
]

【问题讨论】：

另外，我假设IncomingMessagesColumns.json 实际上是IncomingMessagesColumns.js，因为您显示的内容也不是 JSON。

标签： javascript reactjs json

【解决方案1】：

"view": <button type="submit">عرض الرسالة</button>

这不是 JSON 的有效数据。你可以像这样用双引号括起来

"view": "<button type="submit">عرض الرسالة</button>"

现在您可以像这样将字符串 HTML 添加到您的代码中

<div dangerouslySetInnerHTML={{__html: '<button type="submit">عرض الرسالة</button>'}}/>

【讨论】：

当我用双引号写它时，它认为它是一个字符串，并在表格中写下这句话：，但我想添加按钮不是文本。
非常感谢。成功了，谢谢。
@Batool 考虑投反对票