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

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

框架

最近在尝试用高阶组件封装一个表单组件，但发现装饰后的组件接收不到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 性能优化

我来解答赞 8 收藏

反馈

2 条解答

南宫郭云 Lv1

这个问题我之前也踩过坑，React的高阶组件和Vue的mixin机制完全不一样，不能混为一谈。

Vue的mixin会自动合并选项，props和方法都能直接访问。但React的HOC本质上就是一个函数，它返回一个新组件，如果你不手动把props传下去，那被包裹的组件肯定拿不到。

你报错"Can't access property 'bind' of undefined"，大概率就是onSubmit这个prop没传进去，子组件里调用的时候直接炸了。

看下你的HOC是不是这么写的：

function withLogger(WrappedComponent) {

  return class extends React.Component {

    componentDidMount() {

      console.log('组件挂载了');

    }

    render() {

      return ;  // 问题就在这，props丢了

    }

  };

}

问题就在render里面，你直接return了WrappedComponent但没把props传下去。改成这样：

function withLogger(WrappedComponent) {

  return class extends React.Component {

    componentDidMount() {

      console.log('组件挂载了');

    }

    render() {

      return ;  // 用展开运算符透传

    }

  };

}

用{...this.props}把所有props原样传给被包裹的组件，这样onSubmit就能正常拿到了。

如果HOC本身也要注入额外的props，注意顺序，后面传入的会覆盖前面的：

return ;

另外提一句，如果你用装饰器语法，写法是@withLogger放在class上面，确保你的babel配置支持装饰器，不然也会出问题。

后端处理这种组件封装的时候，核心原则就是数据流向要清晰，HOC就是个中间层，该透传的东西别吞掉。

2026-03-01 12:15

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