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

【问题标题】：How to specify null prop type in ReactJS?如何在 ReactJS 中指定空属性类型？
【发布时间】：2017-04-05 09:45:41
【问题描述】：

我在 ReactJS 组件上有一个 prop，它要么是 null，要么是不可变映射。

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

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

我将把它保留为 null、未定义或 Map 的可能性。

我怎样才能使它成为必需的并且类型为 null 或仅映射？

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

我看到了这个例子，但我不知道如何根据自己的需要调整语法，或者是否可行。

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

例如：

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

【问题讨论】：

您看到的属性不存在或为空有什么区别？
How can I declare a PropType corresponding to a nullable number?的可能重复
一个可能的解决方案正在这里讨论github.com/facebook/prop-types/pull/90，添加一个isDefined()和一个isNotNull()

标签： javascript reactjs null nullable immutable.js

【解决方案1】：

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

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

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

【讨论】：

这对我有用，在创建反应应用程序中使用数字> react-scripts 3.4.1

【解决方案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，这对我有用！

【讨论】：

【解决方案3】：

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

详情请参阅React issue #2166。本期讨论除了isRequired 之外还有isRequiredOrNull 属性的可能性。 Bottom line:

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

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

【讨论】：

在 2021 年，Flow 即将退出，有利于 TypeScript。

【解决方案4】：

好像PropTypes.instanceOf(null) 有效。

react@16.8
prop-types@15.6

【讨论】：

TS2345: Argument of type 'null' is not assignable to parameter of type 'new (...args: any[]) => {}'.
警告：失败的道具类型：“instanceof”的右侧不是对象不适用于具有道具类型 15.7 的 React 16.8，所以我在 15.6 上对此表示怀疑

【解决方案5】：

也许为时已晚，但这对我来说是一个自定义的 propType。 React 文档中的更多信息：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.'
      )
    }
  },
}

【讨论】：

【解决方案6】：

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

MyComponent.propTypes = {
    name: PropTypes.string
}

并在defaultProps中定义null值

MyComponent.propTypes = {
    name: null
}

【讨论】：

你第二次sn-p出错了，把propTypes去掉为defaultProps

【解决方案7】：

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

import BetterPropTypes from 'better-prop-types'

// ...

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

【讨论】：