Javascript 使用道具类型时，检查对象中的键是否为字符串

我有以下一种道具需要检查

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

使用flow，我会用下面的方法检查它

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

使用道具类型时，如何进行此类检查？我对这个很陌生

更新

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

---

您可以将

PropTypes.shape

与

PropTypes.oneOfType

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.shape({
    name: React.PropTypes.string.isRequired,
    label: React.PropTypes.string,
  }),
]);

---

查看

PropTypes软件包假设道具已经命名并提前知道。虽然从技术上讲，可以对密钥执行任意检查（我正在寻找自定义验证器和此），但我认为您将面临一个非常艰难的时期。我想提出一个挑战，并提出一个替代方案

而不是传递如下所示的对象：

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

将列作为列数组传递。这里的好处是，使用PropTypes检查非常简单，而且我可以想象很多eaiser需要在代码中进行推理

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

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

---

你能再解释一下吗？我对类型之一的使用有点困惑，因为我理解字符串不是有效的道具-只是形状？此外，您链接的文档表明，

PropTypes

是从它自己的包中导入的，它是否也可以从

React

中访问？为什么标签是数字？我理解

PropTypes.shape

部分，但对于动态键

PropTypes.oneOfType

如何工作？数字只是一个例子，我将其切换回字符串。如果我正确理解了你的问题，你想要一个可以是字符串或对象的字段，如上图所示

oneOfType

允许它是提供的类型之一。因此，它可以是一个带有

名称
和
标签
字段的对象，也可以是一个
字符串
。为了回答您关于React.PropTypes vs PropTypes包的问题，
列
props将始终是一个带有
键值
方法的对象，其中键应该始终是字符串，值应该是字符串
键（名称）和标签的对象
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;

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

... 

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