React prop-types未在浏览器控制台显示必填属性验证警告求助

你的问题核心是React 19默认禁用了prop-types的运行时验证，这是官方为优化性能做出的调整，以下是具体解决步骤：

1. 开启全局prop-types验证（推荐） #

在项目入口文件main.jsx的最顶部添加以下代码，仅在开发环境启用验证：

// main.jsx 最顶部
if (import.meta.env.DEV) {
  window.__REACT_PROPTYPES_THROW__ = true;
}

这段代码会让React在开发模式下强制抛出prop-types验证错误，生产环境自动失效，不会影响线上性能。

2. 单个组件手动触发验证（适合局部调试） #

如果只想针对特定组件开启验证，可以使用prop-types/check-prop-types手动检查：
修改FirstApp.jsx如下：

import PropTypes from 'prop-types';
import checkPropTypes from 'prop-types/check-prop-types';

export const FirstApp = ({title}) => {
  // 仅在开发环境执行验证
  if (import.meta.env.DEV) {
    checkPropTypes(FirstApp.propTypes, {title}, 'prop', FirstApp.name);
  }
  
  return (
    <>
        <h1>{title}</h1>
        <h2>Hello World</h2>
    </>
  )
}

FirstApp.propTypes = {
  title: PropTypes.string.isRequired
}

3. 确认环境与控制台设置 #

• 确保你是通过npm run dev启动的开发环境，生产构建（npm run build）会自动移除prop-types相关代码，不会显示警告。
• 检查Chrome控制台：确认「Warnings」「Errors」选项已勾选，且没有过滤React相关日志。

内容的提问来源于stack exchange，提问作者Antonio Retamosa