One place for hosting & domains

      компонентов

      Настройка компонентов React с помощью свойств


      Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

      Введение

      В этом руководстве вы создадите пользовательские компоненты, передавая свойства в ваш компонент. Свойства — это аргументы, которые вы предоставляете элементу JSX. Они выглядят как стандартные HTML-свойства, но не являются предопределенными и могут использовать несколько типов данных JavaScript, включая числа, строки, функции, массивы и даже другие компоненты React. Ваши пользовательские компоненты могут использовать свойства для отображения данных или использования этих данных, чтобы сделать компоненты интерактивным. Свойства — это ключ к созданию компонентов, которые можно легко адаптировать под разные ситуации, а их знание даст вам инструменты для разработки пользовательских компонентов, которые могут обрабатывать уникальные ситуации.

      После добавления свойств в ваш компонент вы будете использовать PropTypes для определения типа данных, которые ожидает компонент. PropTypes — это простая система типов для проверки того, что данные соответствуют ожидаемым типам во время исполнения. Они будут использоваться как в качестве документации, так и в качестве механизма проверки ошибок, который позволит сохранить прогнозируемое поведение вашего приложения по мере его масштабирования.

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

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

      Предварительные требования

      Шаг 1 — Создание пустого проекта

      На этом шаге мы создадим новый проект, используя Create React App. Затем вы удалите пример проекта и связанные файлы, которые устанавливаются при инициализации проекта. В заключение вы создадите простую структуру файлов для организации ваших компонентов.

      Создайте новый проект. В командной строке запустите следующий скрипт для установки нового проекта с помощью create-react-app:

      • npx create-react-app prop-tutorial

      После завершения создания проекта перейдите в его директорию:

      В новой вкладке или окне терминала запустите проект, используя скрипт start Create React App​​​. Браузер будет выполнять автообновление при изменениях, поэтому вы должны оставить этот скрипт работающим все время при работе:

      Вы получите запущенный локальный сервер. Если проект не был открыт в браузере, вы можете открыть его, перейдя на страницу http://localhost:3000/. Если вы запустили приложение на удаленном сервере, воспользуйтесь адресом http://your_IP_address:3000.

      Ваш браузер загрузит простое приложение React в качестве элемента Create React App:

      Шаблон проекта React

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

      Откройте src/App.js в текстовом редакторе. Это корневой компонент, который встраивается в страницу. Все компоненты будут запускаться отсюда. Дополнительную информацию об App.js можно найти в статье Настройка проекта React с помощью Create React App.

      Откройте src/App.js с помощью следующей команды:

      Вы увидите следующий файл:

      prop-tutorial/src/App.js

      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      
      function App() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
      
      export default App;
      

      Удалите строку import logo from './logo.svg';​​. Затем замените весь код оператора return, который должен возвращать набор пустых тегов: <></>​​​. В результате вы получите страницу валидации, которая ничего не возвращает. Окончательный код будет выглядеть следующим образом:

      prop-tutorial/src/App.js

      
      import React from 'react';
      import './App.css';
      
      function App() {
        return <></>;
      }
      
      export default App;
      

      Сохраните изменения и закройте текстовый редактор.

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

      В окне терминала введите следующую команду:

      Если вы откроете ваш браузер, то увидите пустой экран.

      пустой экран в chrome

      Теперь, когда вы успешно очистили пример проекта Create React App, создайте простую структуру файлов. Это позволит вам поддерживать ваши компоненты изолированными и независимыми.

      Создайте каталог с именем components в каталоге src. В нем будут храниться все ваши пользовательские компоненты.

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

      Создайте каталог для App:

      Переместите все файлы App в этот каталог. Используйте подстановочный символ * для выбора любых файлов, начинающихся с App. вне зависимости от их расширения. Затем используйте команду mv для их отправки в новый каталог.

      • mv src/App.* src/components/App

      В заключение обновите относительный путь импорта в index.js, который представляет собой корневой компонент и инициализирует весь процесс.

      Оператор импорта должен указывать на файл App.js в каталоге App, поэтому необходимо внести следующее изменение:

      prop-tutorial/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      
      ReactDOM.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // Learn more about service workers: https://bit.ly/CRA-PWA
      serviceWorker.unregister();
      

      Сохраните и закройте файл.

      Теперь, когда проект настроен, вы можете создать ваш первый компонент.

      Шаг 2 — Настройка динамических компонентов со свойствами

      На этом шаге вы создадите компонент, который будет изменяться на основе передаваемой информации, т.е. свойств. Свойства — это аргументы, которые вы передаете функции или классу, но так как ваши компоненты трансформируются в HTML-объекты с JSX, вы будете передавать свойства в виде HTML-атрибутов. В отличие от HTML-элементов, вы можете передавать множество разных типов данных, от строк до массивов, объектов и даже функций.

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

      К концу этого шага у вас будет пользовательский компонент, который будет использовать разные свойства. Также вы сможете повторно использовать компонент для отображения массива данных, используя общий компонент.

      Добавление данных

      Во-первых, вам потребуются шаблонные данные. Создайте файл в каталоге src/App с именем data.

      • touch src/components/App/data.js

      Откройте новый файл в текстовом редакторе:

      • nano src/components/App/data.js

      Далее добавьте массив объектов, который вы будете использовать в качестве примера данных:

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: 140,
          diet: ['meat'],
        },
        {
          name: 'Gorilla',
          scientificName: 'Gorilla beringei',
          size: 205,
          diet: ['plants', 'insects'],
          additional: {
            notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
          }
        },
        {
          name: 'Zebra',
          scientificName: 'Equus quagga',
          size: 322,
          diet: ['plants'],
          additional: {
            notes: 'There are three different species of zebra.',
            link: 'https://en.wikipedia.org/wiki/Zebra'
          }
        }
      ]
      

      Массив объектов содержит разные данные и дает вам возможность использовать различные свойства. Каждый объект представляет собой отдельное животное с именем, научным наименованием, размером, питанием и опциональным полем дополнительных данных, которое будет содержать ссылки или заметки. В этом коде вы также экспортировали массив default.

      Сохраните и закройте файл.

      Создание компонентов

      Затем создайте временный компонент AnimalCard. Этот компонент будет получать свойства и отображать данные.

      Сначала создайте каталог в src/components​​​ с названием AnimalCard, а затем файл с именем src/components/AnimalCard/AnimalCard.js и CSS-файл с именем src/components/AnimalCard/AnimalCard.css.

      • mkdir src/components/AnimalCard
      • touch src/components/AnimalCard/AnimalCard.js
      • touch src/components/AnimalCard/AnimalCard.css

      Откройте AnimalCard.js​​​ в текстовом редакторе:

      • nano src/components/AnimalCard/AnimalCard.js

      Добавьте базовый компонент, который импортирует CSS и возвращает тег <h2>.

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard() {
        return <h2>Animal</h2>
      }
      

      Сохраните и закройте файл. Теперь вам нужно импортировать данные и компонент в базовый компонент App.

      Откройте src/components/App/App.js​​​:

      • nano src/components/App/App.js

      Импортируйте данные и компонент, а затем пройдите по данным, возвращая компонент для каждого элемента в массиве:

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      import data from './data';
      import AnimalCard from '../AnimalCard/AnimalCard';
      import './App.css';
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard key={animal.name}/>
            ))}
          </div>
        )
      }
      
      export default App;
      

      Сохраните и закройте файл. Здесь вы используете метод массива .map() для итерации по данным. Кроме добавления цикла у вас также имеется оборачивающий div с классом, который вы будете использовать для стилей, и тег <h1> для наименования вашего проекта.

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

      Проект React в браузере без стилей

      Далее добавьте несколько стилей для выравнивания элементов. Откройте App.css:

      • nano src/components/App/App.css

      Замените его содержимое на следующее для организации элементов:

      prop-tutorial/src/components/App/App.css

      .wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 20px;
      }
      
      .wrapper h1 {
          text-align: center;
          width: 100%;
      }
      

      Здесь используется flexbox для приведения в порядок данных и их выравнивания. padding добавляет некоторое пространство в окне браузера. justify-content будет обеспечивать дополнительное пространство между элементами, а .wrapper h1​​​ будет размещать заголовок Animal на всю его длину.

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

      Проект React в браузере с распределенными данными

      Добавление свойств

      Теперь, когда у вас есть настроенные компоненты, вы можете добавить свое первое свойство. При итерации по данным у вас был доступ к каждому объекту в массиве data и элементам, которые он содержит. Вы будете добавлять каждый элемент данных в отдельное свойство, которое затем будет использоваться в компоненте AnimalCard.

      Откройте App.js:

      • nano src/components/App/App.js

      Добавьте свойство name в AnimalCard.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard
                key={animal.name}
                name={animal.name}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      Сохраните и закройте файл. Свойство name выглядит как стандартный HTML-атрибут, но вместо строки вы передаете свойство name объекта animal в фигурных скобках.

      Теперь, когда вы передали одно свойство в новый компонент, необходимо использовать его. Откройте AnimalCard.js:

      • nano src/components/AnimalCard/AnimalCard.js

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

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      
      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard(props) {
        const { name } = props;
        return (
          <h2>{name}</h2>
        );
      }
      

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

      После деструктурирования объекта вы можете использовать отдельные элементы данных. В данном случае вы будете использовать заголовок в теге <h2>, включающий значение в фигурных скобках, чтобы React мог использовать его в качестве JavaScript.

      Также вы можете использовать свойство в объекте prop, используя запись через точку. В качестве примера вы можете создать элемент <h2>​​​ следующим образом: <h2>{props.title}</h2>​​​. Преимущество деструктурирования состоит в том, что вы можете собирать неиспользуемые свойства и использовать оператор rest объекта.

      Сохраните и закройте файл. Сделав это и перезагрузив браузер, вы увидите конкретное имя для каждого животного вместо заполнителя.

      Проекты React с указанием имен животных

      Свойство name представляет собой строку, но строка может быть любым типом данных, который вы можете передавать функции JavaScript. Чтобы посмотреть, как это работает, добавьте остальные данные.

      Откройте файл App.js:

      • nano src/components/App/App.js

      Добавьте свойство для каждого из следующих элементов: scientificName, size, diet и additional. Они сдержат строки, целые числа, массивы и объекты.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {albums.map(album => (
              <AnimalCard
                additional={animal.additional}
                diet={animal.diet}
                key={animal.name}
                name={animal.name}
                scientificName={animal.scientificName}
                size={animal.size}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

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

      Сохраните и закройте файл. Откройте AnimalCard.js.

      • nano src/components/AnimalCard/AnimalCard.js

      На этот раз выполните деструктуризацию свойств списка параметров функции и используйте данные в компоненте:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
        additional,
        diet,
        name,
        scientificName,
        size
      }) {
        return (
          <div>
            <h2>{name}</h2>
            <h3>{scientificName}</h3>
            <h4>{size}kg</h4>
            <div>{diet.join(', ')}.</div>
          </div>
        );
      }
      

      После получения данных вы можете добавить scientificName и size в теги заголовка, но вам нужно превратить массив в строку, чтобы React мог отобразить их на странице. Вы можете сделать это с помощью join(', '), который будет создавать разделенный запятой список.

      Сохраните и закройте файл. Сделав это и обновив браузер, вы увидите структурированные данные.

      Проект React с полным списком данных для животных

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

      Откройте App.js:

      • nano src/components/App/App.js

      Создайте функцию showAdditionalData, которая будет конвертировать объект в строку и отображать ее в качестве оповещения.

      prop-tutorial/src/components/App/App.js

      import React from 'react';
      ...
      
      function showAdditional(additional) {
        const alertInformation = Object.entries(additional)
          .map(information => `${information[0]}: ${information[1]}`)
          .join('n');
        alert(alertInformation)
      };
      
      function App() {
        return (
          <div className="wrapper">
            <h1>Animals</h1>
            {data.map(animal => (
              <AnimalCard
                additional={animal.additional}
                diet={animal.diet}
                key={animal.name}
                name={animal.name}
                scientificName={animal.scientificName}
                showAdditional={showAdditional}
                size={animal.size}
              />
            ))}
          </div>
        )
      }
      
      export default App;
      

      Функция showAdditional конвертирует объект в массив пар, где первый элемент — это ключ, а второй — значение. Затем она преобразовывает данные, конвертируя пару ключей в строку. После этого функция добавляет разделитель строки n, прежде чем передавать полную строку в сигнальную функцию.

      Поскольку JavaScript может принимать функции в качестве аргументов, React также может принимать функции в качестве свойств. Поэтому вы можете передать showAdditional в AnimalCard в качестве свойства с именем showAdditional.

      Сохраните и закройте файл. Откройте AnimalCard:

      • nano src/components/AnimalCard/AnimalCard.js

      Извлеките функцию showAdditional из объекта свойства, затем создайте <button> с событием onClick, которое вызывает функцию с объектом additional:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
        additional,
        diet,
        name,
        scientificName,
        showAdditional,
        size
      }) {
        return (
          <div>
            <h2>{name}</h2>
            <h3>{scientificName}</h3>
            <h4>{size}kg</h4>
            <div>{diet.join(', ')}.</div>
            <button onClick={() => showAdditional(additional)}>More Info</button>
          </div>
        );
      }
      

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

      Оповещение с информацией

      Если вы попробуете нажать More Info для карточки Lion, то получите ошибку. Это связано с тем, что для льва дополнительные данные отсутствуют. Вы увидите, как исправить это, в шаге 3.

      В заключение давайте добавим немного оформления в наш проект. Добавьте className для animal-wrapper в div в AnimalCard:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
        return (
          <div className="animal-wrapper">
      ...
          </div>
        )
      }
      

      Сохраните и закройте файл. Откройте AnimalCard.css:

      • nano src/components/AnimalCard/AnimalCard.css

      Добавьте CSS для добавления тонкой границы и отступа для карточек и кнопки:

      prop-tutorial/src/components/AnimalCard/AnimalCard.css

      .animal-wrapper {
          border: solid black 1px;
          margin: 10px;
          padding: 10px;
          width: 200px;
      }
      
      .animal-wrapper button {
          font-size: 1em;
          border: solid black 1px;
          padding: 10;
          background: none;
          cursor: pointer;
          margin: 10px 0;
      }
      

      Это код CSS добавит небольшую границу для карточки и заменит стиль кнопки, используемый по умолчанию, на границу и отступ. cursor: pointer​​​ будет менять курсор при наведении на кнопку.

      Сохраните и закройте файл. После выполнения этих действий и обновления браузера вы увидите данные в отдельных карточках.

      Проект React с добавленными стилями для карточек животных

      На данный момент вы создали два пользовательских компонента. Вы передали данные второму компоненту из первого компонента, используя свойства. Свойства включают разные данные, такие как строки, целые числа, массивы, объекты и функции. В вашем втором компоненте вы использовали свойства для создания динамического компонента с помощью JSX.

      В следующем шаге вы будете использовать типизированную систему prop-types для указания структуры, которую ваш компонент ожидает увидеть, что будет обеспечивать предсказуемость в приложении и предотвращать ошибки.

      Шаг 3 — Создание предсказуемых свойств с помощью PropTypes и defaultProps

      На этом шаге вы добавите простую систему типизации для ваших компонентов с помощью PropTypes. PropTypes действуют как прочие системы типизации, прямо определяя тип данных, который вы ожидаете получить от определенного свойства. Они также дают вам возможность определять данные по умолчанию в случаях, когда свойство не всегда требуется. В отличие от большинства систем типизации, PropTypes выполняет проверку при исполнении, так что если свойства не соответствуют типу, код скомпилируется, но в консоли будет отображена ошибка.

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

      Пакет prop-types устанавливается вместе с Create React App, поэтому для его использования необходимо только импортировать его в ваш компонент.

      Откройте AnimalCard.js:

      • nano src/components/AnimalCard/AnimalCard.js

      Затем импортируйте PropTypes из prop-types:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      

      Добавьте PropTypes прямо в функцию компонента. В JavaScript функции являются объектами, что означает, что вы можете добавить свойства, используя точечный синтаксис. Добавьте следующие PropTypes в AnimalCard.js:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      
      AnimalCard.propTypes = {
        additional: PropTypes.shape({
          link: PropTypes.string,
          notes: PropTypes.string
        }),
        diet: PropTypes.arrayOf(PropTypes.string).isRequired,
        name: PropTypes.string.isRequired,
        scientificName: PropTypes.string.isRequired,
        showAdditional: PropTypes.func.isRequired,
        size: PropTypes.number.isRequired,
      }
      

      Сохраните и закройте файл.

      Как видите, существует множество разных PropTypes. Это только небольшой пример; изучите официальную документацию React, чтобы узнать об остальных типах, которые вы можете использовать.

      Давайте начнем со свойства name. Здесь вы указываете, что в name должна находиться строка. Свойство scientificName аналогично предыдущему примеру. sizeчисло, которое может включать как числа с плавающей точкой, например, 1.5, так и целые числа, например 6. showAdditional — это функция (func).

      diet же имеет определенные отличия. В данном случае вы указываете, что diet представляет собой массив, но вам также необходимо указать, что будет содержать этот массив. В нашем случае массив будет содержать только строки. Если вы хотите смешивать типы, то можете использовать другое свойство oneOfType, которое принимает массив валидных значений PropTypes. Вы можете использовать oneOfType где угодно, так что если вы хотите, чтобы size принимал числа или строки, внесите следующие изменения:

      size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
      

      Свойство additional также немного более сложное. В этом случае вы указываете объект, но, чтобы внести большую ясность, вы указываете, что должен содержать объект. Для этого вы можете использовать PropTypes.shape, принимающий объект с дополнительными полями, которым требуются собственные значения PropTypes. В нашем случае link и notes имеют значение PropTypes.string.

      В настоящее время все данные имеют правильную форму и отвечают свойствам. Чтобы узнать, что произойдет, если значение PropTypes не будет совпадать, откройте ваши данные:

      • nano src/components/App/data.js

      Измените для size значение на строку в первом элементе:

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: '140',
          diet: ['meat'],
        },
      ...
      ]
      

      Сохраните файл. После выполнения этих действий и обновления браузера вы увидите ошибку в консоли.

      Error

      index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`. in AnimalCard (at App.js:18) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

      Браузер с ошибкой типизации

      В отличие от других систем типизации, таких как TypeScript, PropTypes не будет генерировать предупреждение на этапе сборки, поэтому если ошибки кода отсутствуют, то код все равно скомпилируется. Это означает, что вы можете случайно опубликовать код с ошибками свойств.

      Измените данные обратно на правильный тип:

      prop-tutorial/src/components/App/data.js

      export default [
        {
          name: 'Lion',
          scientificName: 'Panthero leo',
          size: 140,
          diet: ['meat'],
        },
      ...
      ]
      

      Сохраните и закройте файл.

      Откройте AnimalCard.js:

      • nano src/components/AnimalCard/AnimalCard.js

      Каждое свойство, за исключением additional, имеет параметр isRequired. Это означает, что они должны быть обязательно указаны. Если вы не укажете обязательное свойство, код все равно скомпилируется, но вы получите ошибку исполнения в консоли.

      Если свойство не обязательное, вы можете добавить значение по умолчанию. Рекомендуется всегда добавлять значение по умолчанию для предотвращения ошибок при исполнении, если свойство не обязательное. Например, в компоненте AnimalCard вы вызываете функцию с данными additional. Если их там нет, функция попытается получить их и изменить несуществующий объект, в результате чего приложение упадет.

      Чтобы предотвратить эту проблему, добавьте значение defaultProp для additional:

      prop-tutorial/src/components/AnimalCard/AnimalCard.js

      import React from 'react';
      import PropTypes from 'prop-types';
      import './AnimalCard.css'
      
      export default function AnimalCard({
      ...
      }
      
      AnimalCard.propTypes = {
        additional: PropTypes.shape({
          link: PropTypes.string,
          notes: PropTypes.string
        }),
      ...
      }
      
      AnimalCard.defaultProps = {
        additional: {
          notes: 'No Additional Information'
        }
      }
      

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

      Сохраните и закройте файл. После этого обновите браузер. После обновления страницы нажмите кнопку More Info​​​ карточки Lion. У нее нет поля additional в данных, поэтому свойство не определено. Но AnimalCard будет заменять свойство по умолчанию.

      Браузер с сообщением по умолчанию в оповещении

      Теперь ваши свойства хорошо задокументированы и являются либо обязательными, либо имеют значение по умолчанию для обеспечения предсказуемого кода. Это позволит будущим разработчикам (в том числе вам) понимать, какие свойства требуются компоненту. Это облегчит повторное использование ваших компонентов, предоставляя вам полную информацию о том, как компонент будет использовать данные, которые он получает.

      Заключение

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

      Свойства — это важнейший инструмент для создания сложных приложений, дающий возможность создания компонентов, которые могут адаптироваться к получаемым данным. С помощью PropTypes вы создаете предсказуемые и понятные компоненты, которые дадут команде возможность повторно использовать работу друг друга для создания гибкой и стабильной базы кода. Если вас интересуют другие обучающие модули по React, ознакомьтесь с нашей страницей тем по React или вернитесь на страницу серии Программирование на React.js.



      Source link

      Инспектирование сетевых компонентов Kubernetes


      Введение

      Kubernetes — это система организации контейнеров, способная управлять контейнерными приложениями в кластере серверных узлов. Для обеспечения доступа к сети для всех контейнеров в кластере требуются сложные схемы сетевых подключений. В этой статье мы кратко расскажем о некоторых инструментах и методиках для проверки используемой схемы сетевых подключений.

      Эти инструменты могут быть полезны для отладки проблем со связью, расследования проблем с пропускной способностью сети или изучения принципов работы Kubernetes.

      Если вы хотите узнать больше о Kubernetes, вам поможет наше руководство «Введение в Kubernetes». Для обзора сетевых возможностей Kubernetes прочитайте статью «Сети в Kubernetes: под капотом».

      Начало работы

      В этом обучающем модуле предполагается, что у вас имеется кластер Kubernetes с установленным локальным компонентом kubectl, настроенным для подключения к кластеру.

      В следующих разделах содержатся различные команды, которые предполагается выполнять на узлах Kubernetes. Они выглядят примерно так:

      • echo 'this is a node command'

      Команды для выполнения на локальном компьютере будут выглядеть так:

      • echo 'this is a local command'

      Примечание. Большнство команд в этом обучающем модуле должно выполняться от имени пользователя root Если вы используете пользователя с привилегиями sudo на узлах Kubernetes, добавьте sudo для запуска команд, когда это требуется.

      Поиск IP-адреса кластера пода

      Чтобы найти IP-адрес кластера пода Kubernetes, запустите на локальном компьютере команду kubectl get pod с опцией -o wide. Эта опция выводит больше информации, включая узел размещения пода и IP-адрес кластера пода.

      Output

      NAME READY STATUS RESTARTS AGE IP NODE hello-world-5b446dd74b-7c7pk 1/1 Running 0 22m 10.244.18.4 node-one hello-world-5b446dd74b-pxtzt 1/1 Running 0 22m 10.244.3.4 node-two

      В столбце IP будет указан внутренний IP-адрес кластера для каждого пода.

      Если вы не видите под, который вам нужен, проверьте правильность выбора пространства имен. Вы можете вывести список всех подов во всех пространствах имен с помощью флага --all-namespaces.

      Поиск IP-адреса службы

      С помощью команды kubectl также можно определить IP-адрес службы. В данном случае мы выводим список всех служб во всех пространствах имен:

      • kubectl get service --all-namespaces

      Output

      NAMESPACE NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE default kubernetes ClusterIP 10.32.0.1 <none> 443/TCP 6d kube-system csi-attacher-doplugin ClusterIP 10.32.159.128 <none> 12345/TCP 6d kube-system csi-provisioner-doplugin ClusterIP 10.32.61.61 <none> 12345/TCP 6d kube-system kube-dns ClusterIP 10.32.0.10 <none> 53/UDP,53/TCP 6d kube-system kubernetes-dashboard ClusterIP 10.32.226.209 <none> 443/TCP 6d

      IP-адрес службы указывается в столбце CLUSTER-IP.

      Поиск и ввод сетевых пространств имен подов

      Каждому поду Kubernetes присваивается собственное сетевое пространство имен. Сетевые пространства имен (netns) — это примитив сетей Linux, обеспечивающий изоляцию сетевых устройств.

      Запускать команды через netns пода может быть полезно для проверки разрешения DNS или общей работоспособности сети. Для этого нужно предварительно посмотреть идентификатор процесса одного из контейнеров в поде. Для Docker мы можем сделать это с помощью серии из двух команд. Вначала выведите список контейнеров, запущенных на узле:

      Output

      CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 173ee46a3926 gcr.io/google-samples/node-hello "/bin/sh -c 'node se…" 9 days ago Up 9 days k8s_hello-world_hello-world-5b446dd74b-pxtzt_default_386a9073-7e35-11e8-8a3d-bae97d2c1afd_0 11ad51cb72df k8s.gcr.io/pause-amd64:3.1 "/pause" 9 days ago Up 9 days k8s_POD_hello-world-5b446dd74b-pxtzt_default_386a9073-7e35-11e8-8a3d-bae97d2c1afd_0 . . .

      Найдите идентификатор контейнера или имя любого контейнера в поде, который вас интересует. В показанных выше результатах отображается два контейнера:

      • Первый контейнер — это приложение hello-world, запущенное в поде hello-world
      • Второй — это контейнер pause, запущенный в поде hello-world. Этот контейнер используется исключительно для захвата сетевого пространства имен пода

      Чтобы получить идентификатор процесса любого из контейнеров, запишите идентификатор контейнера или имя и используйте его в следующей команде docker:

      • docker inspect --format '{{ .State.Pid }}' container-id-or-name

      Output

      14552

      Будет выведен идентификатор процесса (или PID). Теперь мы можем использовать программу nsenter для запуска команды в сетевом пространстве имен этого процесса:

      • nsenter -t your-container-pid -n ip addr

      Обязательно используйте собственный PID и замените ip addr командой, которую вы хотите запустить в сетевом пространстве имен пода.

      Примечание. Использование nsenter для запуска команд в пространстве имен пода дает преимущества по сравнению с такими программами как docker exec. Это преимущество заключается в том, что у вас имеется доступ ко всем командам, поддерживаемым узлом, а не только к ограниченному набору команд, установленному в контейнерах.

      Поиск интерфейса виртуальной сети Ethernet пода

      Каждое пространство имен пода взаимодействует с пространством root netns через виртуальный конвейер ethernet. Со стороны узла этот конвейер выглядит как устройство, которое обычно начинается с veth и заканчивается уникальным идентификатором, например veth77f2275 или veth01. Внутри пода этот конвейер выглядит как eth0.

      Его можно использовать для корреляции устройств veth, сопряженных с конкретными подами. Для этого мы выводим список всех сетевых устройств в узле, а затем выводим список устройств в сетевом пространстве имен пода. Для получения связи мы можем провести корреляцию номеров устройств в двух списках.

      Запустите команду ip addr в сетевом пространстве имен пода, используя nsenter. Более подробную информацию об этом можно найти в предыдущем разделе «Поиск и ввод пространств имен подов»:

      • nsenter -t your-container-pid -n ip addr

      Output

      1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever 10: [email protected]if11: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1450 qdisc noqueue state UP group default link/ether 02:42:0a:f4:03:04 brd ff:ff:ff:ff:ff:ff link-netnsid 0 inet 10.244.3.4/24 brd 10.244.3.255 scope global eth0 valid_lft forever preferred_lft forever

      Данная команда выводит список интерфейсов пода. Запишите номер if11 после [email protected] на экране результатов примера. Это означает, что конвейер eth0 этого пода связан с 11-м интерфейсом узла. Теперь запустите команду ip addr в пространстве имен по умолчанию узла для перечисления его интерфейсов:

      Output

      1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever preferred_lft forever inet6 ::1/128 scope host valid_lft forever preferred_lft forever . . . 7: [email protected]: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1450 qdisc noqueue master docker0 state UP group default link/ether 26:05:99:58:0d:b9 brd ff:ff:ff:ff:ff:ff link-netnsid 0 inet6 fe80::2405:99ff:fe58:db9/64 scope link valid_lft forever preferred_lft forever 9: [email protected]: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1450 qdisc noqueue master docker0 state UP group default link/ether ae:05:21:a2:9a:2b brd ff:ff:ff:ff:ff:ff link-netnsid 1 inet6 fe80::ac05:21ff:fea2:9a2b/64 scope link valid_lft forever preferred_lft forever 11: veth4f7342d@if10: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1450 qdisc noqueue master docker0 state UP group default link/ether e6:4d:7b:6f:56:4c brd ff:ff:ff:ff:ff:ff link-netnsid 2 inet6 fe80::e44d:7bff:fe6f:564c/64 scope link valid_lft forever preferred_lft forever

      В этом примере 11-й интерфейс — это интерфейс veth4f7342d. Это конвейер виртуальной сети ethernet к исследуемому нами поду.

      Проверка отслеживания соединения Conntrack

      До выпуска версии 1.11 в Kubernetes для отслеживания соединений использовались таблицы NAT iptables и модуль ядра conntrack. Для вывода списка всех отслеживаемых соединений используйте команду conntrack:

      Чтобы постоянно отслеживать новые соединения, используйте флаг -E:

      Чтобы вывести отслеживаемые conntrack соединения на определенный адрес назначения, используйте флаг -d:

      • conntrack -L -d 10.32.0.1

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

      /var/log/syslog

      Jul 12 15:32:11 worker-528 kernel: nf_conntrack: table full, dropping packet.
      

      Это настройка sysctl для отслеживания максимального количества соединений. Вы можете вывести список текущих значений с помощью следующей команды:

      • sysctl net.netfilter.nf_conntrack_max

      Output

      net.netfilter.nf_conntrack_max = 131072

      Используйте флаг -w для установки нового значения:

      • sysctl -w net.netfilter.nf_conntrack_max=198000

      Чтобы сделать этот параметр постоянным. добавьте его в файл sysctl.conf:

      /etc/sysctl.conf

      . . .
      net.ipv4.netfilter.ip_conntrack_max = 198000
      

      Проверка правил таблиц Iptables

      До выпуска версии 1.11 в Kubernetes использовались таблицы NAT iptables для преобразования виртуальных IP-адресов и балансировки нагрузки служебных IP-адресов.

      Чтобы сохранить все правила таблиц iptables на узле, используйте команду iptables-save:

      Поскольку результаты могут быть длинными, вы можете отправить результаты через конвейер в файл (iptables-save > output.txt) или на пейджер (iptables-save | less) для большего удобства просмотра.

      Чтобы вывести только правила NATдля службы Kubernetes, используйте команду iptables и флаг -L для указания правильной цепочки:

      • iptables -t nat -L KUBE-SERVICES

      Output

      Chain KUBE-SERVICES (2 references) target prot opt source destination KUBE-SVC-TCOU7JCQXEZGVUNU udp -- anywhere 10.32.0.10 /* kube-system/kube-dns:dns cluster IP */ udp dpt:domain KUBE-SVC-ERIFXISQEP7F7OF4 tcp -- anywhere 10.32.0.10 /* kube-system/kube-dns:dns-tcp cluster IP */ tcp dpt:domain KUBE-SVC-XGLOHA7QRQ3V22RZ tcp -- anywhere 10.32.226.209 /* kube-system/kubernetes-dashboard: cluster IP */ tcp dpt:https . . .

      Запросы DNS кластера

      Один из способов отладки разрешения DNS кластера заключается в развертывании контейнера отладки с помощью всех необходимых инструментов и использование kubectl для выполнения команды nslookup. Это описывается в официальной документации по Kubernetes.

      Еще один способ запроса DNS кластера заключается в том, чтобы использовать dig и nsenter с узла. Если dig не установлен, его можно установить с помощью apt в дистрибутивах Linux на базе Debian:

      Вначале найдите IP-адрес кластера службы kube-dns:

      • kubectl get service -n kube-system kube-dns

      Output

      NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kube-dns ClusterIP 10.32.0.10 <none> 53/UDP,53/TCP 15d

      IP-адрес кластера подсвечен выше. Теперь мы используем nsenter для запуска dig в пространстве имен контейнера. Дополнительную информацию об этом можно найти в разделе «Поиск и ввод сетевых пространств имен подов»:

      • nsenter -t 14346 -n dig kubernetes.default.svc.cluster.local @10.32.0.10

      Команда dig ищет полное доменное имя службы service-name.namespace.svc.cluster.local и указывает IP-адрес службы DNS кластера (@10.32.0.10).

      Просмотр деталей IPVS

      В версии Kubernetes 1.11 команда kube-proxy может настроить IPVS для обработки преобразования виртуальных IP-адресов служб в IP-адреса подов. Вы можете вывести таблицу преобразования IP-адресов с помощью команды ipvsadm:

      Output

      IP Virtual Server version 1.2.1 (size=4096) Prot LocalAddress:Port Scheduler Flags -> RemoteAddress:Port Forward Weight ActiveConn InActConn TCP 100.64.0.1:443 rr -> 178.128.226.86:443 Masq 1 0 0 TCP 100.64.0.10:53 rr -> 100.96.1.3:53 Masq 1 0 0 -> 100.96.1.4:53 Masq 1 0 0 UDP 100.64.0.10:53 rr -> 100.96.1.3:53 Masq 1 0 0 -> 100.96.1.4:53 Masq 1 0 0

      Чтобы вывести IP-адрес одной службы, используйте опцию -t и укажите желаемый IP-адрес:

      • ipvsadm -Ln -t 100.64.0.10:53

      Output

      Prot LocalAddress:Port Scheduler Flags -> RemoteAddress:Port Forward Weight ActiveConn InActConn TCP 100.64.0.10:53 rr -> 100.96.1.3:53 Masq 1 0 0 -> 100.96.1.4:53 Masq 1 0 0

      Заключение

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



      Source link