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

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

组件

最近在写一个复用性较高的表单组件，但发现当父组件忘记传入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的默认值和校验应该怎样组合使用才最稳妥？

最佳实践自定义组件

我来解答赞 9 收藏

反馈

2 条解答

茂庭 ☘︎ Lv1

你这是自己给自己挖坑呢，解构默认值和 defaultProps 一起用会打架的。父组件传了 required={undefined} 时，defaultProps 认为你传了值就不生效了，但解构默认值也不起作用，因为 undefined 被当作"传了值"。

我一般直接用解构默认值，省事：

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

  

    {label}

    

  


);



MyInput.propTypes = {

  label: PropTypes.string.isRequired,

  required: PropTypes.bool

};



// defaultProps 直接删掉，别写了，React团队以后打算废弃函数组件的这玩意儿

二选一就行，别两个都写，越写越乱。

2026-03-02 14:10

♫利伟 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