React三大核心属性之二——props
1. props 的基本使用
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<!-- 引入类型检测库 -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script type='text/babel'>
class Person extends React.Component {
// props是只读的
render() {
const {name,age,sex} = this.props
// this.props.name = 'jerry' 错误代码,props只读不可更改
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age+1}</li>
<li>性别:{sex}</li>
</ul>
)
}
}
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired,// 限制name必传,且为字符串
sex: PropTypes.string,//限制sex为字符串
age: PropTypes.number,//限制age为数值
speak: PropTypes.func // 限制speak为函数
}
// 指定标签的默认属性值
Person.defaultProps = {
sex: '女',//sex默认值为女
age: 18 // age默认值为18
}
const p = {name:'李红旗', age: 38, sex:'男'}
const p1 = {name:'孔阳', age: 30}
const p2 = {name:'子君', sex: '男'}
// ReactDOM.render(<Person name='李红旗' age='38' sex='男'/>, document.getElementById('test'))
/* 批量传递标签属性 因为引入了react.development.js和 babel,所以可以使用...p展开对象
但是仅限于在HTML标签中使用
*/
ReactDOM.render(<Person {...p} speak={speak}/>, document.getElementById('test'))
ReactDOM.render(<Person {...p1}/>, document.getElementById('test1'))
ReactDOM.render(<Person {...p2}/>, document.getElementById('test2'))
function speak() {
console.log('说')
}
</script>
2. props的简写方式:上述 Person 类可以简写,使用 static 静态属性
class Person extends React.Component {
// props是只读的
render() {
const {name,age,sex} = this.props
// this.props.name = 'jerry' 错误代码,props只读不可更改
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age+1}</li>
<li>性别:{sex}</li>
</ul>
)
}
// 对标签属性进行类型、必要性的限制
static propTypes = {
name: PropTypes.string.isRequired,// 限制name必传,且为字符串
sex: PropTypes.string,//限制sex为字符串
age: PropTypes.number,//限制age为数值
speak: PropTypes.func // 限制speak为函数
}
// 指定标签的默认属性值
static defaultProps = {
sex: '女',//sex默认值为女
age: 18 // age默认值为18
}
}
注:类中的构造器能省略就省略,在开发中几乎不写
3. 函数式组件使用 props
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<!-- 引入类型检测库 -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script type='text/babel'>
function Person(props) {
const {name, age, sex} = props
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
<li>性别:{sex}</li>
</ul>
)
}
Person.propTypes = {
name: PropTypes.string.isRequired,// 限制name必传,且为字符串
sex: PropTypes.string,//限制sex为字符串
age: PropTypes.number,//限制age为数值
}
Person.defaultProps = {
sex: '女',//sex默认值为女
age: 18 // age默认值为18
}
ReactDOM.render(<Person name='jerry' age={18} sex='男'/>, document.getElementById('test'))
</script>
4. props 总结
1. 定义:
1) 每个组件对象都会有 props (properties) 属性
2) 组件标签的所有属性都保存在 props 中
2. 作用
1)通过标签属性从组件外向组件内传递变化的数据
2)注意:组件内部不要修改 props 数据
3. 操作
1)内部读取某个属性值
this.props.name
2)对 props 中的属性值进行类型限制和必要性限制
第一种方式(React v15.5 开始已弃用)
Person.propTypes = {
name: React.PropTypes.string.isRequired,// 限制name必传,且为字符串
sex: React.PropTypes.string,//限制sex为字符串
age: React.PropTypes.number,//限制age为数值
}
第二种方式(新)
Person.propTypes = {
name: PropTypes.string.isRequired,// 限制name必传,且为字符串
sex: PropTypes.string,//限制sex为字符串
age: PropTypes.number,//限制age为数值
}
3)扩展属性:将对象的所有属性通过 props 传递
<Person {...persoon}/>
4)默认属性值
Person.defaultProps = {
age: 18,
sex: '男'
}
5)组件类的构造函数
constructor(props) {
super(props)
console.log(props) // 打印所有属性
}
生活是痛苦的白天,死亡是凉爽的夜晚。