React中如何动态设置组件的defaultProps属性

你提供的代码写法是无效的：defaultProps 是类组件的静态配置项，定义时无法直接访问组件实例的 props 对象，你的 address: {props.address} 写法会直接抛出引用错误。React 类组件原生的defaultProps属于静态配置，仅支持写死固定值，不支持动态计算或依赖传入的props取值，你可以用以下方案实现需求：

• 函数组件：用参数默认值+运行时兜底
  这是React 16.8之后官方推荐的写法，支持任意动态逻辑，包括依赖其他props计算默认值：

function Shop({ 
  status = 'open', 
  address, 
  shopId 
}) {
  // 如果address未传入，用shopId动态生成对应地址
  const finalAddress = address ?? getAddressByShopId(shopId)
  // 组件内部直接使用finalAddress、status即可
  return <div>{/* 渲染逻辑 */}</div>
}

• 类组件：在render/构造函数内做兜底赋值
  如果仍然使用类组件，不需要依赖静态的defaultProps，直接在使用props前做默认值赋值即可：

class Shop extends React.Component {
  render() {
    const { 
      status = 'open', 
      address,
      shopId
    } = this.props
    const finalAddress = address ?? this.getAddressByShopId(shopId)
    return <div>{/* 渲染逻辑 */}</div>
  }
}

• 全局通用动态默认值：用高阶组件(HOC)封装
  如果需要给多个组件批量设置动态默认值，可以封装高阶组件统一处理：

const withShopDefaultProps = (Component) => {
  return (props) => {
    // 此处可以写任意动态逻辑，比如从全局配置/上下文取默认值
    const defaultProps = {
      status: window.globalShopConfig?.defaultStatus || 'open',
      address: props.address || getGlobalDefaultAddress()
    }
    // 注意要把用户传入的props放在后面，覆盖默认值
    return <Component {...defaultProps} {...props} />
  }
}

// 使用时包装目标组件即可
const ShopWithDefaults = withShopDefaultProps(Shop)

补充说明：React 18 已经正式废弃了类组件的defaultProps语法，官方更推荐上述运行时赋值的方式实现默认值，灵活度更高且支持所有动态场景。

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