React中如何在类组件中使用高阶组件？代码渲染报错求助

我看了你这段代码，问题主要出在高阶组件changeColor的写法上，导致组件渲染时触发函数相关错误。咱们一步步拆解问题，然后给出修正方案：

问题根源分析 #

你的changeColor高阶组件里，嵌套了「函数组件返回类组件」的冗余结构，而且类组件的render方法直接引用了外部函数的props变量——这种写法会让React无法正确识别组件的props传递逻辑，最终引发渲染错误。另外，原类组件没有通过this.props获取自身的props，而是直接使用外部作用域的变量，这也会导致组件更新时无法响应props变化。

修正后的代码方案 #

方案一：用函数组件实现高阶组件（推荐，更简洁） #

这种写法符合React函数式编程的趋势，代码逻辑更清晰：

import React from 'react';
import ReactDOM from 'react-dom';

const Test = props => (
  <p> 
    {console.log(props)} 
    {props.children} 
  </p>
);

// 重构后的高阶组件
const changeColor = WrappedComponent => props => {
  // 把需要注入的props和原props一起传递给被包装组件
  return (
    <WrappedComponent 
      style={{ color: props.color }} 
      test="adasd"
      {...props} // 传递所有原props，包括children
    />
  );
};

const Temp = changeColor(Test);

// 渲染组件时传递必要的props
ReactDOM.render(
  <Temp color="blue">我是测试文本</Temp>,
  document.getElementById('root')
);

方案二：用类组件实现高阶组件（如果你偏好类写法） #

如果一定要用类组件，需要确保类组件通过this.props获取自身的props：

import React from 'react';
import ReactDOM from 'react-dom';

const Test = props => (
  <p> 
    {console.log(props)} 
    {props.children} 
  </p>
);

// 重构后的类组件版高阶组件
const changeColor = WrappedComponent => {
  return class extends React.Component {
    render() {
      const { color, children, ...restProps } = this.props;
      return (
        <WrappedComponent 
          style={{ color }} 
          test="adasd"
          {...restProps}
        >
          {children}
        </WrappedComponent>
      );
    }
  };
};

const Temp = changeColor(Test);

ReactDOM.render(
  <Temp color="green">我是测试文本</Temp>,
  document.getElementById('root')
);

关键修正点说明 #

1. 简化高阶组件结构：去掉了冗余的「函数返回类组件」嵌套，直接返回函数组件或类组件，避免作用域混淆。
2. 正确传递props：使用{...props}（或{...restProps}）把所有原props传递给被包装组件，确保props.children和其他自定义props能正常传递。
3. 类组件用this.props：如果用类组件实现HOF，必须通过this.props获取组件自身的props，不能直接引用外部作用域的变量。

这样修改后，你再渲染Temp组件，就能正常输出带有指定颜色的文本，同时控制台也会打印出完整的props对象啦～

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