Các nguyên mẫu trong thành phần chức năng không trạng thái

Question

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

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

Answer 1

Nó không phải là khác nhau với các trạng thái, Bạn có thể thêm nó thích:

Header.propTypes = { 
    title: React.PropTypes.string 
} 

Answer 2

Các official docs thấy làm thế nào để làm điều này với các lớp học phần ES6, nhưng cũng áp dụng cho các thành phần chức năng không quốc tịch.

Thứ nhất, npm install/yarn thêm new prop-types package nếu bạn chưa có.

Sau đó, thêm propTypes của bạn (và defaultProps quá 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