Question

正如我所听到的，谈到箭头功能（ES6）作为HOC，例如

const c = a => b => {
    return(<a>{b}</a>)
}

可以转换成如下的ES5代码：

const c = function(a){
    return function(b){
        return(<a>{b}</a>);
    }
}

如上所述，以下示例在ES6中带有“ props”参数：

const withDisplayTrack = WrappedComponent => props => {
    const { children, onClick, handleClick, times, ..._props } = props;
    return (
        <WrappedComponent>
          {children} <small>({times} times clicked)</small>
        </WrappedComponent>
    );
}

将如下转换为ES5：

const withDisplayTrack = function(WrappedComponent){

     return function(props){
           const { children, onClick, handleClick, times, ..._props } = props;
           return(
                <WrappedComponent>
                  {children} <small>({times} times clicked)</small>
                </WrappedComponent>
           );
      }
}

但是，关于上面的代码，我不理解如何从props的父组件向下传递WrapperComponent参数。

更具体地说，在ES5代码中，尽管内部函数仅返回以props作为参数的函数，但参数props的实际props值如何为withDisplayTrack，是否拥有{ children, onClick, handleClick, times, ..._props }之类的所有道具？对我来说，似乎很难在返回函数中的withDisplayTrack参数与props的实际道具之间找到任何联系。

谢谢您的帮助。

编辑）我忘了提到一个前提，即实际道具是从withDisplayTrack的父组件传递下来的。

props参数在React ES6中的HOC中如何工作？

0 个答案: