Question

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

我查看了SF在回复声明中提出的其他问题，但我无法理解它。

所以，当我偶然发现一篇关于媒体的文章时，我试图理解HOC的反应。

作者在他的例子中写了这行代码。

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>

我们的HOC（Yell）在这里也可以作为

返回

const yell = PassedComponent => ({children, ...props}) => {
    return (

由于在第一个箭头函数({children, ...props})之后有两个箭头函数和类似的东西，我认为它是双返HOC函数。

[问题]：有人可以解释一下双重回复或上面的代码吗？

Answer 1

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

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

是的，return字被使用了两次。但这里有两个功能。每个人只有一个return陈述。

外部的一个接受一个组件作为参数，它返回一个函数。该函数现在是一个组件（是的，组件是函数），可以与子项和道具进行实例化。

Answer 2

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))

了解Javascript中的双返回函数

2 个答案: