时间戳

首页 > 解决方案 > React Javascript中高阶函数中的两个箭头是什么

javascript - React Javascript中高阶函数中的两个箭头是什么

问题描述

以下是我正在查看的一个示例 HOC 函数，但没有从两个箭头的角度理解它的含义，特别是第二个箭头，我们正在解构孩子和道具。

const HOCFunction = (PassComponent) => ({children, ...props}) => {
  return (<PassComponent {...props}>
    {children.split("").reverse().join("")}
  </PassComponent>)
}

根据 React 文档中提到的定义：

高阶组件是一个接受一个组件并返回一个新组件的函数。

那么这第二个参数到底是干什么用的呢？

整个代码：

const reverse = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.split("").reverse().join("")}
    </PassedComponent>

const name = (props) => <span>{props.children}</span>
const reversedName = reverse(name)
<reversedName>Hello</reversedName>

标签： javascriptreactjsarrow-functionshigher-order-components

解决方案

像这样定义的 HOC 实际上只是高阶函数。返回函数的函数。在这种情况下，第一个函数接受一个 react 组件进行装饰，并返回一个函数式组件，其参数是最终将使用的组件的 props。

也许把它分解一下会更好。

// decorate some passed component
const reverse = (PassedComponent) => {
  // define a new functional component
  const WrappedComponent = ({ children, ...props}) => {
    ...
    return (
      <PassedComponent {...props}>
        {children.split("").reverse().join("")}
      </PassedComponent>
    );
  }

  // return new wrapped component with reversed children
  return WrappedComponent;
}

推荐阅读