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

Posted 2023-02-19

【中文标题】将多个数据添加到 react-table 中的列

【英文标题】：Adding multiple data to a column in react-table

【发布时间】：2018-09-08 20:10:47

【问题描述】：

我有一个使用 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 => 属性，并认为我也可以尝试调用一个对其进行布局的函数，但两次都出现错误。

任何想法如何做到这一点？

【参考方案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 => 
              return (
                <div>
                  <span className="class-for-name">row.row.product.name</span>
                  <span className="class-for-description">row.row.product.description</span>
                </div>
              )
            
          ]
        ]
        defaultPageSize=10
        className="-highlight"
      />
    </div>

  )

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

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

到这里：

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

【讨论】：

谢谢Shota！我进行了这些更改，但出现“无法读取未定义的属性‘名称’”错误。所以我将“row.product.name”更改为“row.row.product.name”，它现在可以工作了。有点奇怪，但至少它有效！

是的，我的错，实际上row 是一个大对象，包含很多东西。如果您尝试console.log，您可以看到它们。

那么如果产品项超过 1 会怎样？