PropTypes in funktionalen zustandslosen Komponenten

Question

Ohne Verwendung der Klasse, wie verwende ich PropTypes in funktionalen zustandslosen Komponente von reagieren?

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

Answer 1

Es ist nicht anders mit dem Stateful ist, können Sie fügen Sie es mögen:

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

Answer 2

Die official docs zeigen, wie diese Klassen mit ES6 Komponente zu tun, aber das gleiche gilt für staatenlos Funktionskomponenten.

Erstens, npm installieren/Garn die new prop-types package hinzufügen, wenn Sie nicht bereits haben.

Fügen Sie Ihre propTypes (und ggf. auch defaultProps) hinzu, nachdem die zustandslose Funktionskomponente definiert wurde, bevor Sie sie exportieren.

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