时间戳

首页 > 解决方案 > 当传递“null”时，React PropTypes defaultProps 不起作用

reactjs - 当传递“null”时，React PropTypes defaultProps 不起作用

问题描述

我有一个案例，我将多个属性传递给一个组件。道具来自 wordpress，所以我无法影响传递的确切内容 - 值总是带有“null”。

但是，我希望在传递“null”时采用 defaultProp 值。

我需要通过组件本身以某种方式解决这个问题......有没有办法？

https://codesandbox.io/embed/proptypes-in-react-forked-g29oy?fontsize=14&hidenavigation=1&theme=dark

标签： reactjs

解决方案

仅当您未根据需要标记道具时才使用默认道具

这也是一个 eslint 规则

当你标记为必填时，你确定道具会通过，所以没有理由拥有defaultProps

MyComponent.propTypes = {
  firstName: PropTypes.string,
};

MyComponent.defaultProps = {
  firstName: "John Doe"
};

或者

MyComponent.propTypes = {
  firstName: PropTypes.string.isRequired,
};

此外，当您将 props 传递为 null 时，意味着 prop 的变量没有引用到任何实际值，这相当于不传递它。

推荐阅读