Каковы две стрелки в функции в функции более высокого порядка в React Javascript

Question

Ниже приведен пример функции HO C, которую я смотрю, но не получил ее значения в виде двух стрелок, особенно второй, где мы разлагаем структуру потомков и подпорок.

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

Из определения, упомянутого в React docs:

Компонент высшего порядка - это функция, которая принимает компонент и возвращает новый компонент.

Так что же это за второй параметр для?

Весь код:

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

Компонент высшего порядка - это функция, которая принимает компонент и возвращает новый компонент.

Позволяет разбить ваш код, чтобы понять, какие две функции, реквизиты и потомки

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

Name теперь просто функциональный компонент, поэтому при вызове его как

<Name>Stack OverFlow<Name/>

будет отображаться <span>Stack OverFlow</span> для домена.

Теперь давайте посмотрим на обратный ход ho c,

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

- это просто функция, возвращающая другую функцию. Старый добрый способ написать это

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), обратное имя будет новым компонентом, который является функцией, возвращаемой из HO C, что эквивалентно

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 2

Прежде всего, ваш код синтаксически неверен. потому что имя компонента React должно начинаться с заглавной буквы. теперь

ваш базовый базовый компонент примерно такой.

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

принимает в качестве входных данных объект Props, содержащий дочерние элементы со свойством nae children. консольный журнал следующий,
<Name>Hello</Name>, вы получите

props: {children: "Hello"}

, поэтому компонент Name берет объект props, который содержит дочерние элементы, то есть строку, и включает его, используя {props.children}

теперь HOF - это функция, которая принимает функцию в качестве аргумента и возвращает другую функцию. в языке React он называется HO C, это функция, которая принимает в качестве аргумента компонент React и возвращает другой компонент React. чтобы избежать путаницы в операторах распространения, вы можете изменить реверс следующим образом.

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

const ReversedName = reverse (Name);

в приведенном выше коде компонент, возвращенный из HO C, принимает реквизиты в качестве входного объекта , так вот <ReversedName>Hello</ReversedName>, привет будет go как props.children. поэтому он переворачивает props.children и передает его как дочерний элемент переданному компоненту <Name>. поэтому он преобразуется следующим образом.

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

, поэтому я советую научиться регистрировать любые JSX и видеть, как структурирован объект, что позволит избежать путаницы между подпорками и улучшить знания о реакции.

Answer 3

HOC, определенные следующим образом, на самом деле являются функциями высшего порядка. Функции, которые возвращают функции. В этом случае первая функция принимает компонент реагирования для декорирования и возвращает функциональный компонент, параметры которого являются реквизитами компонента, который в конечном итоге будет использоваться.

Возможно, это лучше проиллюстрировано немного.

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