Блог

Главная - Вопросы по программированию - вопрос easy react / babeljs о возврате реквизитов внутри функции

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

#javascript #reactjs #babeljs

#javascript #reactjs #babeljs

Вопрос:

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

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

 import React from 'react';

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

export default withClass;

Комментарии:

1. Вы возвращаете не реквизит, вы возвращаете функцию, которая принимает реквизит и возвращает элемент React

2. @samsonthehero я вижу. Спасибо

3. Это похоже на фабричный шаблон для обертывания div с классом вокруг вашего компонента? Компонент может быть выражен в виде простой функции, такой простой, как: const Example = () => <div>hi</div> . Поскольку в вашем примере вы не получаете доступа ни к какому реквизиту, вы могли бы также написать «return () =>» вместо этого.

4. Я рекомендую, в качестве хорошей практики, всегда разбирать ваши реквизиты, например, const Example = ({ someVar }) => <div>{someVar}</div>

Ответ №1:

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

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

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