React高阶组件传递props时报错，该如何解决？

Good“统元提问于 2026-02-18 11:48:28 阅读 17

框架

最近在尝试用高阶组件封装一个表单组件，但发现装饰后的组件接收不到props参数。比如传入的onSubmit函数在子组件里变成undefined了。

我按照教程写了个withLogger HOC，用函数组合的方式包裹组件，但控制台报错说“Can’t access property ‘bind’ of undefined”。之前检查过装饰器语法和props默认值，都没发现问题。这是我的Vue版本写法：


<script>
export default {
  mixins: [loggerMixin],
  methods: {
    handleSubmit(event) {
      this.onSubmit(event); // 这里在Vue里能正常调用
    }
  }
}
</script>

换成React写法后，HOC返回的组件props却失效了。是不是HOC需要特别处理prop传递？或者和装饰器的参数顺序有关？

Redux 性能优化

我来解答赞 4 收藏

反馈

1 条解答

UE丶景红 Lv1

问题出在HOC没正确传递props，检查一下你的高阶组件是否用React的...rest把props透传下去了。直接改代码：

function withLogger(WrappedComponent) {

  return function(props) {

    console.log('当前props:', props);

    return <WrappedComponent {...props} />;

  };

}

另外装饰器写法要注意参数顺序，确保原始组件的props不被覆盖。如果用了ES7装饰器语法，确认babel插件配置正确，不然也会导致props丢失。

2026-02-18 12:03