javascript - 如果通过的 json 没有内置这些​​函数，我如何为 React-tables Columns 数组实现单元格函数

Question

当我查看列数组的 react 表文档时，它有一个 Cell 属性，它是一个函数。如果我的 json 来自服务器，我该如何实现该 Cell 函数？

来自服务器的列的 json 如下所示:

[
    {
      Header: "name",
      id: "name"
    },
    {
      Header: "age",
      id: "age"
    }
]

最终结果:

[
    {
      Header: "name",
      id: "name",
      Cell: props => (
        return props.whatever
      ),
    },
    {
      Header: "age",
      id: "age",
      Cell: props => (
        return props.whatever
      ),
    }
]

更新:假设您在下面有此链接 https://codesandbox.io/s/lrn7j5vjrl?from-embed

在此链接中，他从 api 调用中获取数据，然后使用它在数据属性中显示。然后在下面他有一个带有一些属性的硬编码列数组。我遇到的问题是我的列数组也将来自服务器，那么我如何将单元格属性函数添加到传入的列数组 json？

Answer 1

您需要像下面这样在响应数组中显式添加单元格字段。

AddCell(response) {
  let responseArr = [...response];
  return responseArr.map((ele, i) => {
     let obj = {...ele}
     obj.cell = <RowElement />
     return obj
  })
}
//Please don't do any network call and set state inside constructor because it will re-render all the child component so use componentDidMount to call.
componentDidMout() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {
       const updatedData = AddCell(res.data);
      // Update react-table
      this.setState({
        posts: updatedData,
        data: updatedData.slice(0, 5),
        pages: updatedData.length / 5,
        loading: false
      });
    });
  }

快乐的编码 friend :)