javascript - 使用 prop-types 时检查对象中的键是否为字符串

Question

我有以下几种 Prop 需要检查

const columns = {
  name: {
    key    : 'company',
    label  : 'Company',
  },
  employee: {
    key  : 'employee',
    label: 'Employee',
  },
}

使用流程我会用下面的方式检查这个

[key: string]: { // the key is dynamic
      key: string,
      label?: string,
}

我如何在使用 prop-types 时进行此类检查？我对此很陌生。

更新

<Table
  isSearchable
  columns={columns}
  data={data}
/>

column 属性将始终是具有key value 方法的对象，其中key 应始终为字符串和value 应该是 key(name) 和 label 的对象

可能是条款造成了困惑，所以我将列 Prop 更新为

const columns = {
  name: { // how do i check name which is a key and is dynamic
    uniqueName    : 'company',
    displayName  : 'Company',
  },
  employee: {
    uniqueName  : 'employee',
    displayName: 'Employee',
  },
}

Answer 1

PropTypes 包假定 props 是提前命名和已知的。虽然在技术上可能可以检查对 key 运行任意检查(我正在关注自定义验证器和这个 question )，但我认为您正处于非常的艰难时期。我想提出挑战并提出替代方案。

而不是传递一个看起来像这样的对象:

const columns = {
    name: {
        uniqueName    : 'company',
        displayName  : 'Company',
    },
    employee: {
        uniqueName  : 'employee',
        displayName: 'Employee',
    },
};

将列作为列数组传递。这里的好处是使用 PropTypes 检查非常简单，我想在代码中进行推理会更容易。

function App() {
    const columns = [
        {
            column: 'name',
            uniqueName: 'company',
            displayName  : 'Company',
        },
        {
            column: 'employee',
            uniqueName: 'employee',
            displayName  : 'Employee',
        },
    ];

    return (
        <Report
            columns={columns}
        />
  );
}

import React from 'react';
import PropTypes from 'prop-types';

function Report(props) {
    const { columns } = props;

    return (
        <div>
            {columns.map( (column) => {
                return (
                    <p key={column.column}>
                        {column.column}
                    </p>
                )
            })}
        </div>
    )
}

Report.propTypes = {
    columns : PropTypes.arrayOf(
        PropTypes.shape({
            column: PropTypes.string,
            uniqueName: PropTypes.string,
            displayName: PropTypes.string
        })
    )
};

export default Report;

在我自己的项目中，我会更进一步，让 Column 成为它自己的一个类，并使用 PropTypes.instanceOf 检查它:

const columns = [
    Column.init( { ... } ),
    Column.init( { ... } ),
]

... 

Report.propTypes = {
    columns : PropTypes.arrayOf(PropTypes.instanceOf(Column))
};