React组件三大属性之 props
理解
1) 每个组件对象都会有props(properties的简写)属性
2) 组件标签的所有属性都保存在props中
作用
1) 通过标签属性从组件外向组件内传递变化的数据
2) 注意: 组件内部不要修改props数据
编码操作
1) 内部读取某个属性值
this.props.propertyName
2) 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
3) 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
4) 默认属性值
Person.defaultProps = {
name: 'Mary'
}
5) 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}
问题: 请区别一下组件的props和state属性
1) state: 组件自身内部可变化的数据
2) props: 从组件外部向组件内部传递数据, 组件内部只读不修改
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script src="../js/prop-types.js"></script> </head> <body> <div id="test1"></div> <hr> <div id="test2"></div> <script type="text/babel"> /* 需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明 1). 如果性别没有指定, 默认为男 2). 如果年龄没有指定, 默认为18 */ //1、定义组件 function Person(props) { return ( <ul> <li>姓名: {props.name}</li> <li>性别: {props.sex}</li> <li>年龄: {props.age}</li> </ul> ) } // 指定属性的默认值 Person.defaultProps = { sex: '男', age: 18 } //指定属性值和类型的必要性 Person.propTypes={ name: PropTypes.string.isRequired, age: PropTypes.number } //定义一个person const person = { name: 'Tom', sex: '女', age: 18 } const person2 = { name: 'jack' } //2、渲染组件标签 ReactDOM.render(<Person {...person}/>,document.getElementById('test1')) ReactDOM.render(<Person name={person2.name} />,document.getElementById('test2')) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> <script src="../js/prop-types.js"></script> </head> <body> <div id="test1"></div> <hr> <div id="test2"></div> <script type="text/babel"> /* 需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明 1). 如果性别没有指定, 默认为男 2). 如果年龄没有指定, 默认为18 */ //1、定义组件 class Person extends React.Component { render() { console.log(this) return ( <ul> <li>姓名: {this.props.name}</li> <li>性别: {this.props.sex}</li> <li>年龄: {this.props.age}</li> </ul> ) } } // 指定属性的默认值 Person.defaultProps = { sex: '男', age: 18 } // 对标签属性进行限制 Person.propTypes = { name: PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } //定义一个person const person = { name: 'Tom', sex: '女', age: 18 } const person2 = { name: 'jack' } //2、渲染组件标签 ReactDOM.render(<Person {...person}/>,document.getElementById('test1')) ReactDOM.render(<Person name={person2.name} />,document.getElementById('test2')) </script> </body> </html>