React中高阶组件（HOC）的内部函数如何获取Props？

嘿，我来帮你把这个困惑点拆明白！咱们一步步看这段HOC代码：

首先先看完整的代码：

const withProps = Component => ( props => {
  return <Component {...props}/>
} )
export default withProps

第一步：理解HOC的结构 #

withProps本身是一个接收组件作为参数的函数，它的作用是返回另一个新的函数组件——也就是你疑惑的那个内部函数。

第二步：内部函数怎么拿到props？ #

这个内部函数其实就是个普通的React函数组件！当你用这个HOC去包裹一个组件，比如：

// 假设你有一个普通组件
const UserCard = ({ name, avatar }) => (
  <div>
    <img src={avatar} alt={name} />
    <p>{name}</p>
  </div>
)

// 用HOC得到增强后的组件
const EnhancedUserCard = withProps(UserCard)

当你在其他地方渲染<EnhancedUserCard name="Samuel" avatar="/sam-avatar.png" />时，React会自动把父组件传入的{name: "Samuel", avatar: "/sam-avatar.png"}这个props对象，作为参数传给那个内部函数——这和你写任何普通函数组件时，React传递props的逻辑完全一样！

第三步：props的传递路径 #

内部函数拿到props后，通过{...props}把所有props展开传递给被包裹的Component（也就是例子里的UserCard），这样原组件就能正常接收到这些props并使用了。

简单来说，这个HOC就是个“中转站”：父组件传props给内部函数组件 → 内部函数把props原封不动传给被包裹的组件。

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