PropTypes trong thành phần không trạng thái chức năng

Nếu không sử dụng lớp, làm cách nào để sử dụng PropTypes trong thành phần không trạng thái chức năng của phản ứng?

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

Các tài liệu chính thức chỉ ra cách thực hiện điều này với các lớp thành phần ES6, nhưng điều này cũng áp dụng cho các thành phần chức năng không trạng thái.

Thứ nhất, npm install/ yarn addcác prop-loại mới gói nếu bạn chưa có.

Sau đó, thêm propTypes của bạn (và cả defaultProps nếu cần) sau khi thành phần chức năng không trạng thái đã được xác định, trước khi bạn xuất nó.

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;

Nó không khác với trạng thái, Bạn có thể thêm nó như:

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

Đây là một liên kết đến npm loại prop

Tương tự như cách bạn làm trong các thành phần dựa trên lớp:

   import PropTypes from 'prop-types';

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

Lưu ý: Bạn có thể phải cài đặt prop-typesqua npm install prop-typeshoặc yarn add prop-types, tùy thuộc vào phiên bản React mà bạn đang sử dụng.

Nó được thực hiện giống như cách bạn làm với Các thành phần dựa trên lớp

import PropTypes from "prop-types";

    const = function_name => {}

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

Hi vọng điêu nay co ich !

Kể từ React 15 , hãy sử dụng propTypesđể xác thực các đạo cụ và cung cấp tài liệu theo cách này:

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

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

Mã này trên giả định về giá trị mặc định props={}nếu không có đạo cụ nào được cung cấp cho thành phần.