功能无状态组件中的 PropTypes

javascript reactjs react-props react-proptypes

2022-08-30 05:06:57

如果不使用类，我如何在 react 的函数式无状态组件中使用 PropTypes？

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

答案 1

官方文档展示了如何使用ES6组件类执行此操作，但这同样适用于无状态功能组件。

首先，/道具类型包（如果您还没有）。npm installyarn add

然后，在定义无状态功能组件之后，在导出无状态功能组件之前添加您的（如果需要，也可以添加）。propTypesdefaultProps

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;

答案 2

它与有状态没有什么不同，您可以像这样添加它：

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

这是 prop-type npm 的链接