ReactJS使用react-table时在表格中添加button按钮报错如何解决

错误根因 #

JSON 语法仅支持字符串、数字、布尔值、数组、对象、null这几种数据类型，不支持识别JSX元素。你在IncomingMessagesData.json里直接写入了<button>标签，JSON解析到<符号时无法匹配合法语法，直接抛出解析错误。

修复步骤 #

• 第一步：清理数据文件，移除JSON中的非法代码
  修改IncomingMessagesData.json为如下内容，删除不符合JSON规范的view字段：

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

• 第二步：修改列配置文件格式与内容
  你当前的列配置文件使用.json后缀，但包含ES Module的export语法，本身就不符合JSON规范，先将文件重命名为IncomingMessagesColumns.js，再修改内容为如下，直接在列定义里自定义单元格渲染按钮：

export const IncomingMessagesColumns = [
  {
    Header: "اسم المرسل",
    accessor: "senderName"
  },
  {
    Header: "نوع المرسل",
    accessor: "senderType"
  },
  {
    Header: "عنوان الرسالة",
    accessor: "messageAddress"
  },
  {
    Header: "تاريخ الرسالة",
    accessor: "dateOfMessage"
  },
  {
    Header: "قراءة",
    // 自定义单元格渲染，直接返回按钮元素
    Cell: ({ row }) => <button type="button" onClick={() => console.log("查看当前行数据", row.original)}>عرض الرسالة</button>
  }
]

• 第三步：清理组件冗余代码
  IncomingMessagesTable.js中写的onLoadMore函数不符合函数组件语法，你使用的是函数式组件不能调用this.setState，没用的话直接删除这段代码即可。

修改完成后即可正常渲染表格的查看按钮，若要实现查看消息详情的逻辑，直接在按钮的onClick事件中处理row.original对应的行数据即可。

内容的提问来源于stack exchange，提问作者Batool Nassar