ReactJS PropType 检查关联数组的值

Question

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

编辑：一个例子是：

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

Answer 1

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

中验证它

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

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

shouldComponentUpdate(nextProps, nextState){
  if(validate()){
    return true
  }
  return false;
}

Answer 2

好的，这是我能想到的唯一答案，我不知道它是否适合 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
}

第一位从您的对象中获取键，然后按照您的意愿将它们缩减为单个对象。

Answer 3

我今天又需要这个，发现 PropTypes.objectOf() 支持。

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

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

ReactJS PropType 检查关联数组的值

ReactJS PropType to check values of associative arrays

javascript

reactjs

react-proptypes