能否在DefaultProps声明中使用替代props？附示例代码

嘿，这个问题我碰到过不少次，直接给你说结论：不行，你写的Sample.defaultProps = { color: 'red', background: this.props.color }这种写法根本无法工作，我来给你拆解原因和正确的实现方式。

为什么你的写法行不通？ #

• DefaultProps是组件类的静态属性，它在组件实例化之前就被定义和解析了，这时候this根本不存在，更别说访问this.props了——这里的this.props.color要么直接抛出错误，要么返回undefined，完全达不到你想要的效果。
• DefaultProps的设计初衷是给未传入的单个props设置独立的默认值，它本身不支持依赖其他props（不管是传入的还是默认的）。

正确的实现方案 #

如果你想让background的默认值依赖color这个prop，有两种常用的靠谱做法：

1. 在组件内部计算最终值 #

不管是类组件还是函数组件，都可以在渲染阶段处理这个依赖逻辑：

类组件示例

class Sample extends React.Component {
  render() {
    // 先给color设置默认值，再处理background的依赖
    const { color = 'red', background } = this.props;
    // 只有当background未传入时，才用color的值作为默认
    const finalBackground = background ?? color;
    return <div style={{ color, background: finalBackground }}>Hello World</div>;
  }
}

函数组件示例

function Sample({ color = 'red', background }) {
  // 使用空值合并运算符更安全，避免误判0、''等合法的falsy值
  const finalBackground = background ?? color;
  return <div style={{ color, background: finalBackground }}>Hello World</div>;
}

2. 封装复用逻辑（多组件场景） #

如果这种"一个props依赖另一个props默认值"的逻辑需要在多个组件里复用，可以封装成自定义Hook：

// 自定义Hook封装逻辑
function useColorBackgroundProps({ color = 'red', background }) {
  return {
    color,
    background: background ?? color
  };
}

// 在组件中使用
function Sample(props) {
  const { color, background } = useColorBackgroundProps(props);
  return <div style={{ color, background }}>Hello World</div>;
}

小提醒 #

• 永远不要在DefaultProps里引用this或者其他props，时机不对，必然出问题。
• 优先用??（空值合并运算符）代替||，因为||会把0、''、false这些合法的falsy值也当成"未传入"来处理，而??只会在值为null或undefined时才触发替换，更符合props默认值的场景。

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