ReactJS PropType 检查关联数组的值答案

【问题标题】：ReactJS PropType to check values of associative arraysReactJS PropType 检查关联数组的值
【发布时间】：2016-12-08 17:46:31
【问题描述】：

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

编辑：一个例子是：

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

【问题讨论】：

请给你的关联数组举个例子
所以棘手的一点是您不允许编写动态道具类型，因为重点是您是声明性的。最好的办法是要求 PropTypes.arrayOf(PropTypes.object)，然后在必要时进行手动验证。
@ZekeDroid PropTypes.arrayOf 不起作用，因为它不是真正的数组，它是一个简单的对象，用作具有命名索引的数组。密钥是在运行时创建的。

标签： javascript reactjs react-proptypes

【解决方案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)

【讨论】：

【解决方案2】：

我认为您无法使用 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;
}

【讨论】：

【解决方案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
}

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

【讨论】：

即使在生产模式下也会执行reduce操作，对吧？我不希望这样，因为 propTypes 仅在调试模式下检查。
这听起来不正确。为什么只在开发中检查道具类型？也有可能当您缩小生产代码时，react 会优化并且可能不进行检查，但我认为选择性验证不是一个好主意。
您显然可以使用三元进行选择性验证，但我强烈建议您不要这样做。
这就是 React 的工作原理。在生产模式 (NODE_ENV=='production') 下，不会记录任何开发警告（包括 PropType 违规）。为什么？当然是性能。但实际上，我宁愿不要将这些标志放在我自己的代码中。
那我不明白为什么它们会出现在生产模式中。 reduce 函数所做的就是生成propTypes 对象