PropTypes у функціональному компоненті без стану

103

Без використання класу, як я можу використовувати PropTypes у функціональному безкомпонентному компоненті реагування?

export const Header = (props) => (
   <div>hi</div>
)

— Алан Дженшен
джерело

141

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

Під - перше, npm install/ yarn addна нові типи проп-пакет , якщо ви ще не зробили.

Потім додайте свої propTypes (і, за необхідності, також defaultProps) після того, як буде визначений функціональний компонент без стану, перш ніж експортувати його.

import React from "react";
import PropTypes from "prop-types";

const Header = ({ name }) => <div>hi {name}</div>;

Header.propTypes = {
  name: PropTypes.string
};

// Same approach for defaultProps too
Header.defaultProps = {
  name: "Alan"
};

export default Header;

— Майкл
джерело

Яка користь від цього? Він також працюватиме без визначених propTypes.

— Ярик

Дякую, я думав, що це стосується лише компонентів класу.

— Дуг

1

@Yarik Використовуючи propTypes, ви отримуєте автоматичні перевірки для вас. Ви отримаєте попередження щоразу, коли ваш код "розірве контракт".

— Іулій Курт

26

Це не відрізняється від стану, ви можете додати його як:

import PropTypes from 'prop-types';
Header.propTypes = {
  title: PropTypes.string
}

Ось посилання на підтримку типів npm

— I Putu Yoga Permana
джерело

2

Хоча якщо ви використовуєте новіші версії React, вам потрібно буде імпортувати PropTypesсамостійно, і в цьому випадку ви захочете піти Reactі просто матиtitle: PropTypes.string

— flyingace

1

Так само, як і в компонентах на основі класу:

   import PropTypes from 'prop-types';

   const funcName = (props) => {
       ...
   }
   funcName.propTypes = {
       propName: PropTypes.string.isRequired
   }

Примітка. Можливо, вам доведеться встановити prop-typesчерез npm install prop-typesабо yarn add prop-types, залежно від версії React, яку ви використовуєте.

— lokeshj
джерело

0

Це робиться так само, як і з компонентами на основі класу

import PropTypes from "prop-types";

    const = function_name => {}

    function_name.propTypes = {
       prop_name : PropTypes.number
       . . . . . . . . . . . . . .
    }

Сподіваюся, що це допомагає!

— Ашутош Тіварі
джерело

0

Починаючи з React 15 , використовуйте propTypesдля перевірки реквізиту та надання документації таким чином:

import React from 'react';
import PropTypes from 'prop-types';

export const Header = (props={}) => (
   <div>{props}</div>
);
Header.propTypes = {
  props: PropTypes.object
};

Цей код у припущенні значень за замовчуванням, props={}якщо компонент не надає реквізиту.

— кирилл .з
джерело