Question

我传入一个对象，这是一个关联数组，作为道具。我事先并不知道密钥（属性名称），我只知道值应该是字符串或布尔值（例如）。如何使用PropTypes验证？

编辑：一个例子是：

{
    "20161001": true,
    "20161002": true,
    "20161003": true,
    "20161004": false,
    "20161005": true,
    "20161006": false
}

Answer 1

我今天再次需要这个，并发现使用PropTypes.objectOf()支持此功能。

请参阅https://reactjs.org/docs/typechecking-with-proptypes.html：

// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number)

Answer 2

我认为您无法使用React.PropTypes进行验证。但你可以做的是你可以在函数中验证它

print [form for form in br.forms()]

如果你想要在验证失败时停止渲染，那么不需要上面的函数，你可以使用以下函数

componentWillReceiveProps(nextProps){
  <write your logic with what ever you want to validate or check or compute>
}

Answer 3

好的，这是我能想到的唯一答案，我不知道它是否适合React，但效果与你想象的一样：

您的想法是在运行时从父组件创建对象（如果您没有，则创建一个）并导出它。然后将其导入实际组件并从中构造propTypes静态对象：

在父组件文件中，在实际组件之外：

function generateMyObject() {
    const myObj = {};
    [0, 1, 2, 3, 4, 5].forEach(i =>
        myObj[`2016010${i}`] = Math.random() > 0.5
    );

    return myObj;
}
export const myObj = generateMyObject();

这将导出名为myObj的命名对象。当然，你添加了你拥有的任何逻辑。关键是要表明我们不需要知道要进行验证的密钥的名称。

在您的子组件文件中：

import { myObj } from './ParentComponent';

export default class ChildComponent extends Component {
    static propTypes = Object.keys(myObj).reduce((key0, key1) => ({
        ...key0,
        [key1]: PropTypes.bool,
    }), {})

    // rest of the component logic
}

第一个位从对象抓取键，然后将它们缩减为单个对象，如您所愿。

ReactJS PropType用于检查关联数组的值

3 个答案: