为什么 React-Table 列数组对象同时具有驼峰式和 PascalCasing

Question

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

我注意到在React-Table中，当我们定义列数组时，列对象有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,
  },
];

Answer 1

您提到的属性在 React-Table 中称为 renderers。如 React-Table documentation 中所述，这些 renderers 可以是以下之一：

反应 Class
JSX 或任何渲染的 React 组件
无状态功能组件
returns 任何原语

并且因为它们可以是 user-defined 组件，所以它们需要大写，因为以小写字母开头的元素在 JSX 中指的是 built-in 组件。我建议您查看关于 JSX 组件的 React 文档的 this part 以获得更好的说明。

为什么 React-Table 列数组对象同时具有驼峰式和 PascalCasing

Why do React-Table column array objects have both camelCasing and PascalCasing

reactjs

react-table