Reactjs 表。如何将多个值加入到 1 个单元格中？

Question

我正在使用 react-table但我有 2 个值要加入到一个单元格中。有谁知道怎么做？

假设我有这个示例代码，现在它有“名字”，它作为名字和姓氏的组合。

如果在我的数据库中我用名字和姓氏分开会发生什么。我怎么能在这里的 ui 中将它们连接在一起(我知道我可以在 db 级别执行此操作，但这只是一个示例)

import ReactTable from 'react-table'

render() {
  const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  },{
    ...
  }]

  const columns = [{
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
  }, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
  }]

  <ReactTable
    data={data}
    columns={columns}
  />
}

Answer 1

这行得通吗？

const columns = [
  {
    Header: 'Full Name',
    accessor: d => `${d.firstName} ${d.lastName}`
  }
]