功能無狀態組件中的 PropTypes

Question

在不使用類的情況下，如何在 react 的功能性無狀態組件中使用 PropTypes？

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

Answer 1

官方文檔展示了如何使用 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;

Answer 2

它與 stateful 沒有什么不同，您可以添加它：

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

這是prop-types npm 的鏈接

Answer 3

與您在基於類的組件中所做的相同：

   import PropTypes from 'prop-types';

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

注意：您可能必須安裝prop-types通過npm install prop-types或yarn add prop-types ，根據不同的陣營您使用的版本。

Answer 4

它的完成方式與基於類的組件相同

import PropTypes from "prop-types";

    const = function_name => {}

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

希望這可以幫助 ！

Answer 5

從React 15 開始，使用propTypes來驗證 props 並以這種方式提供文檔：

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

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

如果沒有向組件提供props={} ，則此代碼假設默認值props={} 。