理解Javascript中的双返回函数

我想了解Javascript中的双返回函数

我浏览了SF中关于返回声明的其他问题，但我无法理解其中的含义

所以，当我试图理解react中的HOC时，偶然发现了一篇关于medium的文章

作者在他的示例中编写了这行代码

const yell = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.toUpperCase()}!
    </PassedComponent>

const Title = (props) => <h1>{props.children}</h1>

const AngryTitle = yell(Title)

<AngryTitle>Whatever</AngryTitle>

//=> <h1>WHATEVER!</h1>

因为在第一个arrow函数

（{children，…props}）

之后有两个arrow函数和类似的东西，所以我认为它是双返回HOC函数

[问题]：有人能给我解释一下双回程或上面的代码吗？

const foo = arg1 => arg2 => arg1 + ar2;

是一个返回另一个函数的函数，与以下函数相同：

function foo(arg1){
   return function(arg2){
     return arg1 + arg2
   }    
}

要获取内部返回值，需要执行以下操作

foo(input1)(input2)

或变体，其中存储带有初始输入的返回函数并再次使用

var f1 = foo(input1)
console.log(f1(input2))
console.log(f1(input3))

---

首先，为了让事情更清楚，让我们使用完整的语法，使用大括号和

return

语句：

const yell = (PassedComponent) => {
    return ({ children, ...props }) => {
        return (
            <PassedComponent {...props}>
                {children.toUpperCase()}!
            </PassedComponent>
        );
    };
}

const yell=（PassedComponent）=>{
返回（{children，…props}）=>{
返回(
{children.toUpperCase（）}！
);
};
}

是的，

return

这个词用了两次。但这里有两个功能。并且每个语句只有一个

return

语句

---

外部函数以组件作为参数，并返回一个函数。该函数现在是一个组件（是的，组件就是函数），可以与子级和道具实例化。

这实际上不是双返回。它是一个返回另一个函数的函数。这类似于

函数yell（…）{return函数（…）{return…；}}

@blex，您能详细解释一下上面的问题吗？

const yell = (PassedComponent) => {
    return ({ children, ...props }) => {
        return (
            <PassedComponent {...props}>
                {children.toUpperCase()}!
            </PassedComponent>
        );
    };
}