为什么我的类装饰器无法修改组件的默认属性？

司空浩毅提问于 2026-01-26 12:59:22 阅读 34

前端

我正在用React写一个组件，想用类装饰器给组件设置默认props，但发现装饰器里的修改好像没生效：


function withDefaults(target) {
  target.defaultProps = { name: 'default' };
}

@withDefaults
class User extends React.Component {
  render() {
    return {this.props.name};
  }
}

当渲染时显示的是undefined，而不是预期的’default’。我已经确认启用了Babel的@babel/plugin-proposal-class-properties，但调试发现target.defaultProps在装饰器里确实被设置了，组件却读取不到。是不是装饰器执行顺序有问题？或者我需要另外绑定this？

异步编程

我来解答赞 5 收藏

反馈

1 条解答

设计师秋香 Lv1

装饰器里的target是指类的构造函数，而React组件的defaultProps需要定义在实例上。省事的话直接改一下代码结构：

function withDefaults(target) {

  target.prototype.defaultProps = { name: 'default' };

}



@withDefaults

class User extends React.Component {

  render() {

    return {this.props.name};

  }

}

这样就能正常读取到默认值了。

2026-01-29 13:15