在类组件中，使用props的一个完整示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<!-- 引入组件标签类型声明文件 -->
<script type="text/javascript" src="./js/prop-types.js"></script>
<script type="text/babel">
// 1、创建类组件
class MyComponent extends React.Component {
// 对标签属性进行类型。必要性的限制
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
sex: PropTypes.string, // 限制sex为字符串
age: PropTypes.number, // 限制age为数值
speak: PropTypes.func, // 限制speak为函数（注意，不能写成function)
};
// 对标签默认值进行设置
static defaultProps = {
sex: "男",
age: 18,
};
render() {
const {
name, age, sex } = this.props;
return (
<ul>
<li>姓名:{
name}</li>
<li>年龄:{
age}</li>
<li>性别:{
sex}</li>
</ul>
);
}
}
// 渲染组件
const info = {
name: "小明" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
</body>
</html>
AI 代码解读
函数式组件的结构和类组件的结构完全不同，那么函数式组件中如何使用？
函数式组件props的写法
当组件是一个函数时，其参数可以接受到props，我们看看示例
<script type="text/babel">
function MyComponent(props) {
console.log("props: ", props);
return (
<ul>
<li>姓名:??</li>
<li>年龄:??</li>
<li>性别:??</li>
</ul>
);
}
// 渲染组件
const info = {
name: "小明", age: 18, sex: "女" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
AI 代码解读
可以看到，函数的参数props（形参）可以接受到通过标签传递的所有参数
那么，函数式组件使用props也就非常容易了
<script type="text/babel">
function MyComponent(props) {
console.log("props: ", props);
return (
<ul>
<li>姓名:{
props.name}</li>
<li>年龄:{
props.age}</li>
<li>性别:{
props.sex}</li>
</ul>
);
}
// 渲染组件
const info = {
name: "小明", age: 18, sex: "女" };
ReactDOM.render(<MyComponent {
...info} />, document.getElementById("test"));
</script>
AI 代码解读
页面效果：
函数式组件如何限定props类型
限定函数式组件的props类型也非常容易
对标签属性进行类型，我们给函数添加propTypes方法即可
MyComponent.propTypes = { /一些限制代码/ }AI 代码解读对标签默认值进行设置我们给函数添加 defaultProps方法即可
MyComponent.defaultProps = { /一些默认值设置/ }AI 代码解读一个比较完整的代码如下
<script type="text/babel"> function MyComponent(props) { return ( <ul> <li>姓名:{ props.name}</li> <li>年龄:{ props.age}</li> <li>性别:{ props.sex}</li> </ul> ); } // 对标签属性进行类型。必要性的限制 MyComponent.propTypes = { name: PropTypes.string.isRequired, // 限制name必传，且为字符串 sex: PropTypes.string, // 限制sex为字符串 age: PropTypes.number, // 限制age为数值 }; // 对标签默认值进行设置 MyComponent.defaultProps = { sex: "男", age: 18, }; // 渲染组件 const info = { name: "小明", age: 18, sex: "女" }; ReactDOM.render(<MyComponent { ...info} />, document.getElementById("test")); </script>AI 代码解读我们验证下
标签属性类型验证
// 对标签属性进行类型。必要性的限制 MyComponent.propTypes = { name: PropTypes.string.isRequired, // 限制name必传，且为字符串 sex: PropTypes.string, // 限制sex为字符串 age: PropTypes.number, // 限制age为数值 }; // 渲染组件 const info = { name: "小明", age: "18", sex: "女" };AI 代码解读上述代码中，我们定义了age的类型为数字，但是实际上我们传递了字符18，打开控制台，我们可以看到类型错误的一个报错，说明类型限制生效了
默认值设置
// 对标签默认值进行设置 MyComponent.defaultProps = { sex: "男", age: 18, }; // 渲染组件 const info = { name: "小明"};AI 代码解读上述代码中，我们sex和age的默认值进行了设置，但给标签只传递了name属性，观察页面，我们可以看到sex和age也展示了，这说明默认值的设置也生效了。
