простой ответ / babeljs вопрос о возвращении реквизита внутри функции - PullRequest
Новая
       15

простой ответ / babeljs вопрос о возвращении реквизита внутри функции

0 голосов
/ 02 апреля 2019

Я изучаю курс удеми, и в нем мы создаем функцию, которая принимает в качестве аргументов компонент и имя класса и возвращает упакованный JSX с WrappedComponent, вложенным в <div>.

Это будет очень просто, но я не понимаю синтаксис для props => ().Почему мы используем реквизит сразу после возврата?Я понимаю, что внутри ( ) есть JSX, чтобы вернуться.Может быть, кто-то может легко объяснить, почему реквизит существует и как он обрабатывается? 

import React from 'react';

const withClass = (WrappedComponent,className) => {
   return props => (
     <div className={className}>
      <WrappedComponent/>
     </div>
   );
};

export default withClass;

1 Ответ

0 голосов
/ 02 апреля 2019

Пример того, что вы скопировали, представляет собой общий шаблон реакции, называемый HOC (Компонент высшего порядка). Здесь происходит следующее: у нас есть функция, которая принимает компонент в качестве аргумента (WrappedComponent), и мы возвращаем определение нового компонента, который обернет нашу WrappedComponent. Вы могли бы также написать следующее 

const withClass = (WrappedComponent,className) => {
   return class extends React.Component {
     render() {
       return(
        <div className={className}>
         <WrappedComponent/>
        </div>
      )
     }
   } 
};

Таким образом, синтаксис props => () - это просто способ определения нового компонента. Стоит отметить, что сам синтаксис используется для объявления функции стрелки.

...