React：将列组件渲染为表中的行组件

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>
  ),
}];  

我试图找出一种创建这种机制的好方法，以在表格主体的每一行中呈现一列。

有学习的好榜样吗？我正在尝试阅读 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
        }
    }
]

表格组件将围绕数据源进行迭代，并在列配置的帮助下构建表格标签。

但是，您始终可以在循环逻辑中添加类似的内容：

   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
   }