React19以前
./components/ChildCom
import PropTypes from 'prop-types';
const ChildCom = (props) => {
return (
<div>
这是子组件
<span>姓名：{props.name} 年龄：{props.age}</span>
</div>
);
};
ChildCom.propTypes = {
name: PropTypes.string.isRequired,
age : PropTypes.number.isRequired,
}
export default ChildCom;App.jsx
import './App.css'
import ChildCom from './components/ChildCom';
function App() {
return (
<>
<div>Hello React</div>
<ChildCom name="张三" age="18" />
</>
)
}
export default App如何看到警告
打开浏览器的开发者工具（F12），查看 Console 标签页，你应该能看到类似这样的警告：
Warning: Failed prop type: The prop
`age` is marked as required in
`ChildCom`, but its value is
`undefined`.React19之后
不会产生错误信息，因为React 19 已经 完全移除了 PropTypes 的内置支持，可以采用Typescript实现校验
ChildCom.tsx
interface Props {
name: string;
age: number;
}
const ChildCom = (props: Props) => {
return (
<div>
这是子组件
<span>姓名：{props.name} 年龄：{props.age}</span>
</div>
);
};
