React PropType defaultProps 不起作用，当传递 "null" 时

Question

我有一个情况，我传递多个属性到一个组件。这些道具来自wordpress，所以我不能影响传递的内容——值总是以"null"出现。

然而，我希望当"null"，则取defaultProp值。

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

https://codesandbox.io/embed/proptypes-in-react-forked-g29oy?fontsize=14& hidenavigation = 1,黑暗主题=

Answer 1

您应该使用or,undefined在后面。它确保我们不传递null值的组件。它使用undefined代替defaultProps将工作

<MyComponent firstName={firstName || undefined} />

https://codesandbox.io/embed/proptypes-in-react-forked-g29oy?fontsize=14& hidenavigation = 1,黑暗主题=

Answer 2

默认的道具只在你没有按要求标记道具时使用

这里也有一个eslint规则

当您将其标记为必需时，您确定props将被传递，因此没有理由使用defaultProps

MyComponent.propTypes = {
firstName: PropTypes.string,
};
MyComponent.defaultProps = {
firstName: "John Doe"
};

或

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

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