如何将组件prop的默认值设为另一个prop的值？(PropTypes)

我有一个名为driven的prop，希望它默认取值自另一个名为source的prop；如果给driven传入自定义值，就使用传入的值，打破这种关联。source的默认prop值很容易设置，但不知道怎么在driven的默认prop中引用source的值？

示例代码：

const Example = ({source = 'foo', driven = source}) => <div />

Example.defaultProps = {
  source: 'foo',
  driven: /* ? */
}

推荐方案：函数参数解构时设置默认值 #

你已经写的参数解构写法就是最优解，不需要在defaultProps里给driven赋值。

完整代码示例 #

const Example = ({ source = 'foo', driven = source }) => {
  return <div>{driven}</div>;
};

// 若需兼容React 16.8之前的版本，可保留source的defaultProps（参数默认值在旧版本可能不生效）
Example.defaultProps = {
  source: 'foo'
};

效果说明 #

• 当仅传入source时，driven会自动等于传入的source值；
• 当source和driven都不传时，source使用默认值'foo'，driven也会同步为'foo'；
• 当传入driven时，无论source是什么值，driven都会使用传入的自定义值。

为什么不能在defaultProps中实现关联？ #

defaultProps是组件的静态属性，它的所有属性值都是在组件定义时就确定的静态值，无法动态访问到其他prop的上下文（不管是默认值还是传入值）。如果在defaultProps里写driven: source，这里的source会指向全局变量而非组件的prop，达不到关联效果。

替代写法（组件内部处理） #

如果你希望显式在组件内部处理而非参数解构，也可以这样写：

const Example = ({ source = 'foo', driven }) => {
  const finalDriven = driven ?? source;
  return <div>{finalDriven}</div>;
};

Example.defaultProps = {
  source: 'foo'
};

这种写法和参数解构的效果完全一致，只是把默认值的逻辑移到了组件内部。

内容的提问来源于stack exchange，提问作者Khaled