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

Question

以下是我正在查看的示例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>

Answer 1

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;
}

Answer 2

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

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

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"]);

    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属性将向下传递到名称组件。整个想法是实现可重用性，因为这里您要渲染相同的组件Name，以正向和反向格式来渲染名称。希望这会有所帮助。

Answer 3

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

您的基本组件就是这样。

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

它以Props对象作为输入，其中包含具有属性nae children的子代。控制台记录以下内容，<Name>Hello</Name>中的您会得到

props: {children: "Hello"}

因此，名称组件采用包含子项的props对象，该对象是字符串，并使用{props.children}包含它。

现在，HOF是一个以功能为参数并返回另一个函数的函数。在React语言中，它被命名为HOC，是一个将React组件作为参数并返回另一个React组件的函数。为避免操作员分散混乱，您可以按以下方式修改反向。

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

在以上代码中，HOC返回的组件将props作为输入对象。所以在<ReversedName>Hello</ReversedName>处，Hello将作为props.children去。因此它反转props.children并将其作为子级传递给已通过的component。因此它的转换如下。

<Name>"olleH"</Name>, which will appended inside <span> tag and be displayed on screen.
所以，我的建议是学习记录任何JSX响应，并了解对象的结构，这将避免所有道具儿童感到困惑，并提高您的反应知识。