理解:
-
每个组件对象都会有
props
(properties的简写)属性 -
组件标签的所有属性都保存在
props
中
作用:通过标签属性从组件外向组件内传递变化的数据
注意:props 是只读的,组件内部不要修改 props 数据,也不允许修改,修改就报错
读取:
this.props.xxx
1、props 的简单使用
1.1、CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props基本使用</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></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/babel">
//创建组件
class Person extends React.Component {
render() {
console.log(this);
const { name, age } = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
//渲染组件到页面
ReactDOM.render(<Person name="peiqi" age={9} />, document.getElementById('test1'))
ReactDOM.render(<Person name="qiaozhi" age={18} />, document.getElementById('test2'))
const person = { name: 'xiaobai', age: 18 }
ReactDOM.render(<Person {...person} />, document.getElementById('test3'))
</script>
</body>
</html>
1.2、Result
2、对 props 进行限制
React v15.5 版本之前使用
React.PropTypes.xxx
,React v15.5 版本正式弃用新方式:使用prop-types库进行限制(需要引入prop-types库)
<!-- 引入prop-types,用于对组件标签属性进行限制 --> <script type="text/javascript" src="../js/prop-types.js"></script>
// 以下代码写在组件类外部
//对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired, //限制name为字符串,且必传
age: PropTypes.number,//限制age为数值
// ReactDOM.render(<Person name={100} speak={()=>{}}/>,document.getElementById('test1'))
speak: PropTypes.func,//限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
name: 'peiqi',//name默认值为peiqi
age: 8 //age默认值为8
}
3、props 简写
构造函数是否必要?参考官网
constructor()
总结一句:无用不必写,如果写了必调
supper(props)
,传入接收到的 props(如果有,当然了怎么会没有呢?),小白建议写…个锤子
class Person extends React.Component{
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
}
static defaultProps = {
name:'peiqi',
age: 8
}
render(){
const {name, age} = this.props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age+1}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
4、函数式组件使用 props
在学习 Hooks 之前函数式组件只能用三大核心属性中的 props
//创建组件
function Person (props){
const {name, age} = props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
</ul>
)
}
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired, // 限制name为字符串,且必传
age: PropTypes.number // 限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {
name: 'peiqi', // name默认值为peiqi
age: 8 // age默认值为8
}
//渲染组件到页面
ReactDOM.render(<Person/>, document.getElementById('test1'))
小白学习参考视频:尚硅谷React教程
中文官网:React 官方中文文档