如何读取传入普通函数的React组件属性？HOC相关疑问

先贴出你编写的HOC代码：

function withNavigationWatcher(Component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>) {
  console.log('withNavigationWatcher Component', Component.props)
  // eslint-disable-next-line react/display-name
  return function (props: any) {
    const { setNavigationData } = useNavigation();
    useEffect(() => {
      setNavigationData({ currentPath: props.match.path });
      // eslint-disable-next-line react/destructuring-assignment
    }, [props.match.path, setNavigationData]);

    return React.createElement(Component, props);
  };
}

调用方式：

component: withNavigationWatcher(route.component),

疑问解答 #

1. 在withNavigationWatcher函数中是否仅能访问组件的默认props？能否访问组件的props属性（即便未设置）？

你在withNavigationWatcher里访问的Component.props，本质是组件的静态属性：

• 对于类组件，只有当你显式定义了static props = {...}这类静态属性时，Component.props才有值；如果没定义，它就是undefined。
• 对于函数组件，通常我们用defaultProps或者参数默认值来设置默认props，直接访问Component.props一般拿不到有效内容，除非你手动给函数组件挂载了这个属性。

这里要明确：此时组件还没有被实例化或渲染，withNavigationWatcher只是接收了组件的构造函数/函数本身，所以根本无法访问组件实例会接收的动态props，只能拿到组件本身定义的静态默认props（如果有）。你代码里的console.log大概率会输出undefined，除非目标组件特意设置了静态的props属性。

2. 返回的内层函数中的props是如何传入的？

返回的内层函数是一个标准的React函数组件，它的props是由使用这个增强后组件的上下文传入的。

在你的场景里，你把增强后的组件作为路由的component属性，那么这些props就是React Router在渲染路由组件时自动传入的路由相关参数（比如match、location、history）——和你直接使用route.component作为路由组件时，React Router给它传props的逻辑完全一致。

简单来说：这个内层组件和普通React组件没有区别，谁使用它，谁就负责给它传递props，在当前路由场景下就是React Router完成传参动作。

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