功能性无状态组件中的PropTypes [英] PropTypes in functional stateless component

问题描述

在不使用类的情况下，如何在React的功能性无状态组件中使用PropTypes?

Without using class, how do I use PropTypes in functional stateless component of react?

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

推荐答案

The official docs show how to do this with ES6 component classes, but the same applies for stateless functional components.

首先， npm install / yarn add

Firstly, npm install / yarn add the prop-types package if you haven't already.

然后，在定义无状态功能组件之后，在导出之前，添加您的 propTypes (如果需要，还添加 defaultProps ).

Then, add your propTypes (and defaultProps too if required) after the stateless functional component has been defined, before you export it.

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;

这篇关于功能性无状态组件中的PropTypes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！