機能的なステートレスコンポーネントのPropTypes

クラスを使用せずに、reactの機能的なステートレスコンポーネントでPropTypeを使用するにはどうすればよいですか？

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

公式ドキュメントは ES6コンポーネントクラスでこれを行う方法を示しているが、同じことはステートレス機能部品に適用されます。

まず、npm install/ まだ行っていない場合yarn addは、新しいprop-typesパッケージ。

次に、ステートレス機能コンポーネントを定義した後、エクスポートする前に、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
}

ここに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={}、コンポーネントに小道具が提供されていない場合のデフォルト値を想定しています。