기능적 상태 비 저장 구성 요소의 PropTypes

클래스를 사용하지 않고 반응의 기능적 상태 비 저장 구성 요소에서 PropType을 어떻게 사용합니까?

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

공식 문서는 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;

Stateful과 다르지 않습니다. 다음과 같이 추가 할 수 있습니다.

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

다음은 prop-types npm에 대한 링크입니다.

클래스 기반 구성 요소에서 수행하는 것과 동일한 방법 :

   import PropTypes from 'prop-types';

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

참고 : 사용중인 React 버전에 따라 또는을 prop-types통해 설치해야 할 수 있습니다 .npm install prop-typesyarn add prop-types

클래스 기반 구성 요소와 동일한 방식으로 수행됩니다.

import PropTypes from "prop-types";

    const = function_name => {}

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

도움이 되었기를 바랍니다 !

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={}는 구성 요소에 제공된 소품이없는 경우 기본값을 가정 합니다.