React函数式组件为何无法使用this.props？

这个问题的核心其实是类组件和函数式组件在React中的本质差异，咱们一步步拆解来看：

1. 类组件与函数式组件的this本质不同 #

• 类组件（比如你的App，继承自PureComponent）是ES6类的实例，React在初始化类组件时，会把传入的props挂载到组件实例的this.props上，所以你能在类的方法里通过this.props访问属性。
• 无状态函数式组件（SFC）就是普通的JavaScript函数，它没有实例化过程，React不会给它绑定任何this上下文——在严格模式下（React默认启用），函数内部的this是undefined，所以根本不存在this.props这个东西。

2. 结合你的HOC代码分析 #

你的withClass高阶组件返回的是一个函数式组件：

return (props) => (
  <div className={className}>
    <WrappedComponent {...props} />
  </div>
)

这里的props是React传递给这个函数组件的参数，直接用这个变量就可以拿到所有传入的属性。

如果写成<WrappedComponent {...this.props} />，会直接抛出Cannot read properties of undefined (reading 'props')的错误——因为函数内部的this是undefined，自然无法读取this.props。

3. 额外补充：即使是带Hooks的函数组件，依然没有this.props #

现在的函数组件可以用Hooks实现状态管理，但本质还是普通JavaScript函数，依然没有类组件那样的实例this，props依然是通过函数参数传入的，所以不管是早期的无状态函数组件还是现在的Hooks组件，都不能用this.props。

回到你的代码，你原来的写法{...props}是完全正确的——把函数组件接收的props展开传递给被包裹的WrappedComponent（也就是你的App类组件），App内部可以正常用this.props访问这些属性。

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