React：将列组件呈现为 Table 中的行组件

Question

我正在 React 中创建一个 Table 组件。我正在查看一些 Table 组件，它们创建了一个列数组以传递给 Table。在此列数组中，您可以放置一个函数来在 tbody 的每一行内呈现一个组件。

Ant Design第一个例子(https://ant.design/components/table/):

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name'
}, {
  title: 'Action',
  key: 'action',
  render: (text, record) => ( <<-- THIS FUNCTION. IT RECEIVES THE ROW RECORD AS A PARAM TOO
    <span>
      This gonna be rendered in each row of the table
    </span>
  ),
}];

我正在尝试找出一种创建此机制的好方法，以在 table 正文的每一行中呈现一列。

有没有好的例子可以学习一下？我正在尝试阅读 NPM 中某些组件的源代码。但是很难理解。

感谢开发者！

Answer 1

这是一个基本示例，通常您的 Table 组件会收到 2 个属性：

数据源，可以是对象数组
列配置，包含属性名，函数的技巧就是javascript的函数式编程，可以接收render函数，用户可以实现自己的render逻辑。

例如

const dataSource = [
    {
        id: 1,
        name: 'aaaa',
        age: 10
    },
    {
        id: 2,
        name: 'bbbb',
        age: 11
    },
    {
        id: 3,
        name: 'ccc',
        age: 12
    },
];

所以列配置如下：

const column = [
    {
        key: 'id',
        label: 'ID'
    },
    {
        key: 'name',
        label: 'Student Name'
    },
    {
        key: 'age',
        label: 'Student Age',
        render: (text, record) => {
            return `** ${text} **`; // just for decoration
        }
    }
]

table 组件将围绕数据源进行迭代，并借助列配置来构建 Table 标记。

但是你总是可以在你的循环逻辑中添加这样的东西：

   if (typeof render === 'function') {
        cell = <td key={key}>{render(item[key], item)}</td>  // call the render function and pass the data
   } else {
        cell = <td key={key}>{item[key]}</td> // else will just render it
   }

React：将列组件呈现为 Table 中的行组件

React: Render column component as a row component in a Table

javascript

components

reactjs

antd