为无状态组件添加defaultProps：为何无法基于其他props设默认值？

嘿，这个问题我之前也踩过坑，核心原因其实和React处理defaultProps的时机有关，我给你掰扯明白：

1. defaultProps的求值时机太早了 #

对于函数式无状态组件来说，defaultProps是作为组件的静态属性存在的，它的求值是在组件定义阶段就完成了——这时候组件还没被调用，自然拿不到任何传入的props，更别说依赖另一个prop的值了。

举个典型的错误例子，你可能会这么写，但它一定会报错：

const UserCard = ({ name, greeting }) => {
  return <div>{greeting}, {name}!</div>;
};

UserCard.defaultProps = {
  name: "Guest",
  greeting: `Hello, ${name}` // 这里的name根本不存在！
};

这里greeting试图依赖name的默认值，但defaultProps的代码在组件定义时就执行了，此时name只是defaultProps对象里的一个属性，还没被绑定到组件的props中，所以会直接抛出name is not defined的错误。

2. 正确的解决方案：在组件内部处理依赖型默认值 #

既然defaultProps做不到，我们可以换个思路——在组件渲染阶段（也就是函数被调用的时候）来计算默认值，这时候所有props都已经可用了。

方案一：解构赋值时直接设置依赖默认值 #

最简洁的方式是在函数参数的解构赋值里处理：

const UserCard = ({ name = "Guest", greeting = `Hello, ${name}` }) => {
  return <div>{greeting}, {name}!</div>;
};

这里的默认值是在组件被调用时求值的：如果没有传入name，就用"Guest"；如果没有传入greeting，就基于已经确定的name值来生成问候语，完美解决依赖问题。

方案二：函数内部计算复杂默认值 #

如果你的默认值逻辑比较复杂（比如需要判断多个条件），可以在函数内部单独处理：

const UserCard = (props) => {
  // 先给基础prop设置默认值
  const { name = "Guest", age } = props;
  // 基于name和age计算greeting的默认值
  const greeting = props.greeting ?? (age >= 18 ? `Hi, ${name}` : `Hello, little ${name}`);

  return <div>{greeting}!</div>;
};

总结一下 #

defaultProps的设计初衷是给单个props提供独立的静态默认值，它不支持依赖其他props，因为求值时机在组件调用之前。而在组件内部处理默认值，是在props已经被传入之后，所以能轻松实现基于其他prop的动态默认值。

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