自定义组件的props默认值和校验应该如何正确设置？

极客雨涵提问于 2026-01-29 16:47:36 阅读 58

组件

最近在写一个复用性较高的表单组件，但发现当父组件忘记传入required字段时，组件会报错。虽然设置了defaultProps，但有时候还是会失效，比如在动态生成组件时默认值没生效。

尝试过这样写：

import PropTypes from 'prop-types';

const MyInput = ({ label, required = false }) => (
  <div>
    <label>{label}</label>
    <input required={required} />
  </div>
);

MyInput.propTypes = {
  label: PropTypes.string.isRequired,
  required: PropTypes.bool
};

MyInput.defaultProps = {
  required: false // 这里明明设置了默认值
};

但有时候在父组件中不传required时依然会报错，甚至在React DevTools里看到required是undefined。请问这种场景下，props的默认值和校验应该怎样组合使用才最稳妥？

最佳实践自定义组件

我来解答赞 6 收藏

反馈

1 条解答

♫利伟 Lv1

问题出在你混用了两种设置默认值的方式：函数参数默认值和defaultProps。React推荐只用defaultProps来设置默认值，这样更统一，也能避免一些奇怪的问题。

改一下就行，像这样：

import PropTypes from 'prop-types';



const MyInput = ({ label, required }) => (

  <div>

    <label>{label}</label>

    <input required={required} />

  </div>

);



MyInput.propTypes = {

  label: PropTypes.string.isRequired,

  required: PropTypes.bool

};



MyInput.defaultProps = {

  required: false // 只在这里设置默认值

};



export default MyInput;

重点：
1. 把required = false从函数参数里移除，只保留defaultProps。
2. 这样无论是在静态渲染还是动态生成组件时，默认值都能正常生效。

如果还有问题，大概率是别的地方出了幺蛾子，再具体看看你的父组件代码吧。

2026-01-30 05:05