向react-table中的列添加多个数据

Question

我有一个使用react-table的表，但对于其中一列，我想显示两条数据——名称和描述。

getInitialState(){
    return {
      data: [{
        id: 1,
        keyword: 'Example Keyword',
        product: [
          name: 'Red Shoe',
          description: 'This is a red shoe.'
        ]
      },{
        id: 2,
        keyword: 'Second Example Keyword',
        product: [
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        ]
      }]
    }
},
render(){
  const { data } = this.state;

  return (
    <div className="app-body">
      <ReactTable
        data={data}
        columns={[{
          columns: [{
              Header: 'Id',
              accessor: id,
              show: false
            }, {
              Header: 'Keyword',
              accessor: 'keyword'
            }, {
              Header: 'Product',
              accessor: 'product'  // <<< here 
            }]
        }]}
      defaultPageSize={10}
      className="-highlight"
    />
    </div>
  )
}

访问器所在的位置

Product

我想在产品列中显示名称和描述（我将设置它们的样式以使用不同的字体大小进行堆叠）。

我尝试使用该列的

Cell: row =>

属性，并认为我也可以尝试调用一个列出它的函数，但我两次都收到错误。

有什么想法可以做到这一点吗？

Answer 1

确实，您应该使用

Cell

，如下所示：

getInitialState(){
  return {
    data: [
      {
        id: 1,
        keyword: 'Example Keyword',
        product: [
          name: 'Red Shoe',
    description: 'This is a red shoe.'
]
},{
    id: 2,
      keyword: 'Second Example Keyword',
      product: [
      name: 'blue shirt',
      description: 'This is a blue shirt.'
  ]
  }]
}
},
render(){
  const { data } = this.state;

  return (
    <div className="app-body">
      <ReactTable
        data={data}
        columns={[{
          columns: [{
            Header: 'Id',
            accessor: id,
            show: false
          }, {
            Header: 'Keyword',
            accessor: 'keyword'
          }, {
            Header: 'Product',
            accessor: 'product',
            Cell: ({row}) => { //spread the props
              return (
                <div>
                  <span className="class-for-name">{row.product.name}</span>
                  <span className="class-for-description">{row.product.description}</span>
                </div>
              )
            }
          }]
        }]}
        defaultPageSize={10}
        className="-highlight"
      />
    </div>

  )
}

我发现的另一件事是产品属性应该是一个对象而不是数组，所以改变这个：

product: [
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        ]

对此：

product: {
          name: 'blue shirt',
          description: 'This is a blue shirt.'
        }

Answer 2

接受的答案对我不起作用。我是这样做的：

const [data, setData] = React.useState([
  {
    name: 'My item',
    desc: 'This is a nice item',
  },
]);

const columns = React.useMemo(() => [
  {
    Header: 'Name',
    accessor: 'name',

    Cell: (props) => (
      <>
        <p className="item title">{props.row.original.name}</p>
        <p className="item desc">{props.row.original.desc}</p>
      </>
    ),
  },
]);

Answer 3

我正在努力解决这个问题，因为我在表格内使用了 cell.getValue() 。如果您想使用上面示例中的单元格值，您需要使用：

flexRender(cell.column.columnDef.cell, cell.getContext())

我希望它对某人有帮助！