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

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

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

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;

스테이트풀과 다르지 않습니다.다음과 같이 추가할 수 있습니다.

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

다음은 프로펠러 유형 npm 링크입니다.

클래스 베이스 컴포넌트와 같은 방법으로 동작합니다.

import PropTypes from "prop-types";

    const = function_name => {}

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

도움이 되길 바랍니다!

클래스 베이스의 컴포넌트와 같은 방법으로,

   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 버전에 따라 다릅니다.

리액트 15부터propTypes다음과 같은 방법으로 소품을 검증하고 문서를 제공합니다.

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

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

이 코드는 기본값을 가정한 것입니다.props={}구성 요소에 소품이 제공되지 않은 경우.

언급URL : https://stackoverflow.com/questions/44582209/proptypes-in-functional-stateless-component