Как применить проверку Props в ReactJS?

изучать ReactJS Изучение

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

React JS имеет встроенную функцию для проверки типа данных props, чтобы убедиться, что значения, передаваемые через props, действительны. Компоненты React имеют свойство propTypes, которое используется для настройки проверки типа данных.

Синтаксис: синтаксис использования propTypes показан ниже.

class Component extends React.Component {
  render() {}
}

Component.propTypes = {/* definition goes here*/};

Валидаторы: объект propTypes содержит список валидаторов для основных типов данных, некоторые из них:

  • PropTypes.any:это означает, что свойство может иметь любой тип данных.
  • PropTypes.bool:это означает, что свойство должно быть логическим.
  • PropTypes.number:это означает, что свойство должно быть числом.
  • PropTypes.string:это означает, что опора должна быть строкой.
  • PropTypes.func:это означает, что опора должна быть функцией.
  • PropTypes.array:это означает, что опора должна быть массивом.
  • PropTypes.object:это означает, что опора должна быть объектом.
  • PropTypes.symbol:это означает, что опора должна быть символом.
  • PropTypes.instanceOf:это означает, что свойство должно быть экземпляром определенного класса JavaScript.
  • PropTypes.isRequired:это означает, что опора должна быть предоставлена.
  • PropTypes.oneOf ():это означает, что свойства должны быть одного из нескольких типов указанных значений.
  • PropTypes.element:это означает, что реквизит должен быть элементом.

Создание приложения React и установка модуля

Шаг 1: Создайте приложение React, набрав в терминале следующую команду:

npx create-react-app PropValidation

Шаг 2: После создания папки проекта, то есть PropValidation, перейдите к ней с помощью следующей команды:

cd PropValidation

Шаг 3: После создания приложения ReactJS установите необходимые модули, используя следующую команду.

npm install prop-types

Структура проекта: это будет выглядеть следующим образом.

Читайте также:  10 распространенных уязвимостей безопасности веб-приложений и способы их предотвращения

это будет выглядеть следующим образом

Пример. Теперь запишите следующий код в файл App.js. Здесь App — это наш компонент по умолчанию, в котором мы написали наш код. Здесь мы определили типы свойств для нашего компонента, а также свойства по умолчанию.

import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to GFG!!</h1>
        <h2>ReactJS Props validation example</h2>
        <table>
          <tr>
            <th>Type</th>
            <th>Value</th>
            <th>Valid</th>
          </tr>
          <tr>
            <td>Array</td>
            <td>{this.props.propArray}</td>
            <td>{this.props.propArray ? "true" : "False"}</td>
          </tr>
          <tr>
            <td>Boolean</td>
            <td>{this.props.propBool ? "true" : "False"}</td>
            <td>{this.props.propBool ? "true" : "False"}</td>
          </tr>
          <tr>
            <td>Function</td>
            <td>{this.props.propFunc(5)}</td>
            <td>{this.props.propFunc(5) ? "true" : "False"}</td>
          </tr>
          <tr>
            <td>String</td>
            <td>{this.props.propString}</td>
            <td>{this.props.propString ? "true" : "False"}</td>
          </tr>
          <tr>
            <td>Number</td>
            <td>{this.props.propNumber}</td>
            <td>{this.props.propNumber ? "true" : "False"}</td>
          </tr>
        </table>
      </div>
    );
  }
}
 
// Prop types for our Component
App.propTypes = {
  propArray: PropTypes.array.isRequired,
  propBool: PropTypes.bool.isRequired,
  propFunc: PropTypes.func,
  propNumber: PropTypes.number,
  propString: PropTypes.string,
}
 
// Default Props for our Component
App.defaultProps = {
  propArray: [1, 2, 3, 4, 5],
  propBool: true,
  propFunc: function (x) { return x * 10 },
  propNumber: 1,
  propString: "GFG",
}
 
export default App;

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 /, вы увидите следующий вывод:

Теперь откройте браузер и перейдите по адресу http

Оцените статью
bestprogrammer.ru
Добавить комментарий