React PropType检查动态对象

Question

我最初有一个空对象。

const foo = {};

它会改变为，

const foo = {
 a: 'data',
 b: 'data',
 .
 .
 nth
};

如何为此定义PropTypes或我是否需要为此定制类型检查器？

Answer 1

你可以像这样使用：

对象的所有值都应该具有String的实例：

foo: PropTypes.objectOf(PropTypes.string),

---

For further interest:

可以传递任何对象值：

foo: PropTypes.objectOf(PropTypes.any),

---

对象只能将a和b作为其属性：

foo: PropTypes.shape({
    a: PropTypes.string,
    b: PropTypes.number
}),

或者，自定义验证：

foo: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

Answer 2

这实际上取决于你是否希望你的对象是强类型的。 JS可以非常自由地使用对象类型，或者您可以使用类似打字稿的内容来强制输入所有内容。

我不完全确定你的自定义类型检查器是什么意思，但如果说这是由外部的东西填充，你总是希望对象中的变量是int类型，那么你可以添加一些逻辑来做到这一点。

如果你对整个问题更精确，也许我可以帮助你

Answer 3

要使用PropTypes定义您的形状，您可以使用以下内容：

import PropTypes from 'prop-types';

// your component
const Component = () => <p>Hello world</p>

Component.propTypes = {
  foo: PropTypes.shape({
    a: PropTypes.string,
    b: PropTypes.string,
  }),
}

除此之外，我不确定你的意思:)