Question

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

Ant设计的第一个示例（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的函数编程，你可以接收渲染函数，这样用户就可以实现自己的渲染逻辑。

例如

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
   }

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

1 个答案: