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

Question

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

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

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

Higher-order component is a function that takes a component and returns a new component.

那么第二个参数到底是做什么用的？

完整代码：

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>

Answer 1

像这样定义的 HOC 实际上只是高阶函数。 return 起作用的函数。在这种情况下，第一个函数接受一个 react 组件来装饰，return 是一个功能组件，其参数是最终将使用的组件的 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;
}

Answer 2

Higher-order component is a function that takes a component and returns a new component.

让我们分解您的代码以了解道具和子项这两个功能是什么

const Name = (props) => <span>{props.children}</span>

Name 现在只是一个函数组件，所以像

一样调用它

<Name>Stack OverFlow<Name/>

将 <span>Stack OverFlow</span> 渲染到 dom。

现在让我们看看具体情况，

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

reverse 只是函数返回另一个函数。好的老写法是

var reverse = function reverse(PassedComponent) {
  return function (props) {
    var children = props.children,
        propsWithoutChildren = _objectWithoutProperties(props, ["children"]); //some function to remove children from props

    return (
      <PassedComponent {...propsWithoutChildren}>
        {children.split("").reverse().join("")}
      </PassedComponent>
     )
  };
};

现在当你调用const reversedName = reverse(name)时，反向名称将是一个新的组件，它是从HOC返回的函数，相当于

const ReversedName = ({ children, ...props }) =>
  <Name {...props}> //the component you passed is used here
    {children.split("").reverse().join("")}
  </Name>

传递 {...props} 允许您将任何其他属性传递给名称组件。例如，如果您使用这样的颠倒名称，

<ReversedName className='class-for-name-component'>name</ReversedName>

className 属性将传递给名称组件。整个想法是实现可重用性，因为在这里您渲染相同的组件名称以直接和反向格式呈现名称。希望这有帮助。

Answer 3

首先你的代码在语法上是错误的。因为 React 组件名称应该以大写字母开头。现在，

你的基本组件是这样的。

const Name = props => <span>{props.children}</span>;

它以 Props object 作为输入，其中包含 children 和属性 nae children。控制台记录以下内容，
<Name>Hello</Name> 你会得到

props: {children: "Hello"}

因此 Name 组件采用包含 children 的道具 object ，即字符串并使用 {props.children}

包含它

现在 HOF 是一个函数，它将一个函数作为参数，returns 另一个函数。在 React 语言中，它被命名为 HOC，是一个以 React 组件作为参数和 returns 另一个 React 组件的函数。为避免传播运算符混淆，您可以按以下方式修改 reverse。

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

const ReversedName = reverse(名称);

在上面的代码中，从 HOC 返回的组件将 props 作为输入 object。所以在这里 <ReversedName>Hello</ReversedName> ，你好将成为 props.children。所以它反转 props.children 并将其作为 children 传递给传递的组件 <Name>。所以它转换如下。

<Name>"olleH"</Name>, which will appended inside <span> tag and be displayed on screen.

所以我的建议是学习记录任何 JSX 并查看 object 的结构，这将避免所有道具 children 混淆并提高你的反应知识。

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

What are two arrows in a function in higher order function in React Javascript

javascript

reactjs

arrow-functions

higher-order-components