如何在 ReactJS 中指定空属性类型？

Question

我在 ReactJS 组件上有一个道具，它要么是 null 要么是一个不可变的 Map。

如果我写在我的小部件底部：

MyComponent.propTypes = {
    myMap: React.PropTypes.instanceOf(Immutable.Map)
};

我将其保留为空、未定义或 Map 的可能性。

我怎样才能使它成为必需的，并且只属于 null 或 map 类型？

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

我看到了这个例子，但我不知道如何根据我的需要定制语法，或者是否可能。

编辑：如果一个属性为空，那么它仍然存在，但未定义意味着它没有被完全包含在内。

例如：

<Component id={1} data={null} />
<Component id={2} data={Immutable.Map()} />
<Component id={3} />

Answer 1

可以使用PropTypes.oneOf([null]).isRequired 。 它应该允许 null，没有别的。 您可以将其与任何其他类型结合使用：

PropTypes.oneOfType([
  PropTypes.string.isRequired,
  PropTypes.oneOf([null]).isRequired,
]).isRequired

编辑：当使用 prop-types 15.7.2 给出一个 null 道具时，我只是让这个道具类型失败了，所以我不确定这是否有效（如果它曾经做过？）。 我通过不使用 isRequired 恢复到允许未定义和空值。

Answer 2

我有类似的问题，这就是我来到这里的方式。 我找到了一个对我来说足够好的解决方案，所以我不妨分享一下。

简而言之，我删除了.isRequired并将defaultProps设置为null 。

我想要这样的东西：

// this won't work, because `PropTypes.null` doesn't exists!
MyComponent.propTypes = {
  item: PropTypes.oneOfType([ItemPropTypesShape, PropTypes.null]).isRequired,
};

// this also won't work!
MyComponent.propTypes = {
  item: PropTypes.oneOfType([ItemPropTypesShape, PropTypes.instanceOf(null)]).isRequired,
};

当需要 prop 时，null 总是被视为错误。

我最终这样做了：

MyComponent.propTypes = {
  item: ItemPropTypesShape,
};

MyComponent.defaultProps = {
  item: null,
};

如果我们只有 PropTypes，这对我有用！

Answer 3

当前版本的 React 似乎不支持此要求。

有关更多详细信息，请参阅React 问题 #2166 。 此问题讨论了除isRequired之外的isRequiredOrNull属性的可能性。 底线：

我不希望 PropTypes 有进一步的变化。 Flow 最近变得更加成熟，从我从 React 团队那里听到的，它是类型检查的长期解决方案。 这将 PropTypes 在优先级方面置于同一个“兼容性”桶中——比如 createClass 或 React 插件，它们仍然受支持，但只有错误修复和性能改进，没有添加新功能或更改 API。

换句话说，如果您需要更复杂的类型检查，请改用Flow 。

Answer 4

似乎PropTypes.instanceOf(null)有效。

• 反应@16.8
• 道具类型@15.6

Answer 5

也许为时已晚，但这对我来说是一个自定义 propType。 反应文档中的更多信息： https : //reactjs.org/docs/typechecking-with-proptypes.html#proptypes

static propTypes = {
  myMap: function(props, propName, componentName) {
    if (props[propName] !== null && !(props[propName] instanceof Immutable.Map)) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to `' + componentName + '`. Expected null or Immutable.Map, but received ' + typeof props[propName] + '. Validation failed.'
      )
    }
  },
}

Answer 6

你可以使用没有.isRequired的 prop 类型。

MyComponent.propTypes = {
    name: PropTypes.string
}

并在defaultProps定义null值

MyComponent.propTypes = {
    name: null
}

Answer 7

为了帮助解决这个非常常见的问题，我创建了一个干净且类型完整的包装器，称为Better-prop-types ：

import BetterPropTypes from 'better-prop-types'

// ...

MyComponent.propTypes = {
  myMap: BetterPropTypes.PropTypes.instanceOf(Immutable.Map).isRequiredButNullable
}