时间戳

首页 > 解决方案 > 为什么 React-Table 列数组对象既有 camelCasing 又有 PascalCasing

reactjs - 为什么 React-Table 列数组对象既有 camelCasing 又有 PascalCasing

问题描述

我是 React 新手，刚刚开始使用 React-Table。

我注意到在 React-Table 中，当我们定义 columns 数组时，column 对象有 Header、accessor、maxWidth、minResizeWidth、headerStyle、Cell 等。

Header 和 Cell 是大写的，但其余属性遵循驼峰式约定。

这有更深层次的含义还是只是一个错误？

例如：

const columns = [
  {
    Header: 'Store',
    accessor: 'storeName',
    minResizeWidth: 50,
    headerStyle: { textAlign: 'left' },
  },
  {
    Header: 'Current Rate',
    accessor: 'rate',
    maxWidth: 120,
  },
  {
    Header: 'Effective From',
    accessor: 'fromDate',
    Cell: renderDateCell,
    maxWidth: 120,
  },
];

标签： reactjsreact-table

解决方案

您提到的属性在 React-Table中称为渲染器。如React-Table 文档中所述，这些渲染器可以是以下之一：

  • 一个反应类
  • JSX 或任何渲染的反应组件
  • 无状态功能组件
  • 返回任何原语的函数

并且因为它们可以是用户定义的组件，所以它们必须是大写的，因为以小写字母开头的元素是指 JSX 中的内置组件。我建议您查看有关 JSX 组件的 React 文档的这一部分，以获得更好的说明。

推荐阅读