Присоединяйтесь ко мне, поскольку мы продолжаем в нашем стремлении объяснить и понять код шаблона!

Сегодня мы собираемся погрузиться в Proptypes в React. На самом деле мне было предложено сделать это из -за некоторого шаблонного кода, который появляется, когда вы используете Gatsby new командование

Первое, что выскочило на меня, был фрагментом кода, который появляется в Mayout.js Анкет

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

Что интересно в этой строке кода, так это то, что это не технически Гэтсби, который отвечает здесь. Это на самом деле код React (Gatsby построен на React), но он включен из коробки для стартовых проектов Gatsby CLI.

Proptypes является функцией в React, которая помогает проверить значения, проходящие через реквизит.

Если вы не знакомы с реквизитом, в этом посте есть немного обзора.

Что со всеми реквизитами в любом случае?

Лори ・ 7 мая ’19 ・ 3 мин читать

Идея состоит в том, что Proptypes может уловить несоответствия в типе данных, передаваемых из одного компонента в другой. Например, если MSG это Строка , но компонент, в который он передан, ожидает номер Анкет Даже без TypeScript или другого типа, поддерживаемых JavaScript расширениями, React предоставляет Proptypes как

Proptypes работает на двух уровнях. Это гарантирует, что правильный тип данных передается в определенный компонент. Он также проверяет, что компонент получает правильный тип данных.

Этот пост может помочь вам понять компоненты как концепцию.

Экспорт, импорт и дефолт, о боже!

Лори ・ 29 апреля ’19 ・ 3 мин Читает

В случае кода, с которого мы начали, он устанавливает Proptypes для Макет составная часть. То есть определение проверки для реквизита, переданных в Макет Анкет

Layout.propTypes = {
     ...stuff goes here...
}

Это Макет Компонент Стартовый проект поставляется. Взгляните на реквизит, передаваемые в этот компонент. Это прохождение опоры под названием Дети и ссылаться на это в теле функции рендеринга.

const Layout = ({ children }) => (
    render={data => (
      <>
        

          
{children}
          
        

Теперь давайте посмотрим на пример того, как Макет Сам компонент используется. Мы можем найти такой пример в NotFoundPage Компонент, генерируемый стартовым проектом.

const NotFoundPage = () => (
  
    
    
NOT FOUND
    
You just hit a route that doesn't exist... the sadness.
  
)

Ну, это довольно странно. На первый взгляд Макет Похоже, не использует реквизит вообще. Как правило, реквизиты передаются в виде пары клавиш, которая появляется в открытой метке компонента. Что-то вроде этого.

Затем внутри Пример Компонент, который мы проходили в реквизите и получили доступ к MSG содержание. Но Макет не делает этого.

Как оказалось, Макет все еще использует реквизит, просто по -другому. Дети на самом деле специальная встроенная опора. Это относится ко всему контенту Внутри Макет ярлык.

  
//ALL OF THIS
    
    
NOT FOUND
    
You just hit a route that doesn't exist... the sadness.
//TO THIS
  
)

Все между открытым и близким тегом, считается Дети проп.

Итак, вернемся к нашей проверке Proptypes. Теперь, когда мы знаем Что за Дети Подпора это то, что мы можем начать понимать, как мы проверяем этот контент.

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

Мы можем использовать Макет Чтобы обернуть любое количество вещей, но единственное, что нас волнует, это то, что мы обертываем что-нибудь . Мы не можем отображать страницу без информации вообще, или, по крайней мере, мы не хотим. Пустой макет – это не то, что мы ищем. Вот почему у нас есть Isrequired Анкет

Мы также хотим дать несколько туманное определение того, что это может быть. Узел Ключевое слово просто говорит, что я прошел в чем -то, что можно сделать. Что бы это ни было.

Имейте в виду, что этот раздел шаблона созрел для перемен. Когда вы определяете свое приложение Gatsby, вы можете обеспечить соблюдение различных стандартов. Например, вы можете ограничить опору, чтобы иметь один родительский элемент таким.

Layout.propTypes = {
  children: PropTypes.element.isRequired
};

Gatsby дает вам это в качестве отправной точки, чтобы побудить вас использовать правоприменение типа и показать вам, что он может сделать.

Теперь мы понимаем, что делает этот фрагмент кода Proptypes, чтобы TypeCheck нашего Макет составная часть. В качестве дополнительного бонуса нам также удобнее со встроенным Дети проп.

Как всегда, слишком часто мы видим одноразовые линии кода внутри фреймворков и проектов, которые мы не тратим время, чтобы понять. Я призываю вас любопытно исследовать все, что вы видите! Это сделает вас лучшим программистом.

Обратите внимание на то, что скоро появится больше оснований!

Оригинал: “https://dev.to/laurieontech/honey-i-type-checked-the-children-5ad3”