React技术栈-组件三大属性之props
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.组件的props属性概述
每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
通过标签属性从组件外向组件内传递变化的数据(注意: 组件内部不要修改props数据)
二.props实战案例
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件三大属性之props</title> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box5"></div> </body> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/prop-types.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> //1.1>.组件定义方式一:使用工厂函数定义组件 function Person(props){ return ( <ul> <li>姓名:{props.name}</li> <li>年龄:{props.age}</li> <li>性别:{props.sex}</li> </ul> ) } //指定组件默认属性值 Person.defaultProps = { sex : '女', age :20 } //对props中的属性值进行类型限制和必要性限制,要求name数据类型为string，age的数据类型为int. Person.propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number } //1.2>.组件定义方式二:ES6类组件 class Person2 extends React.Component{ render(){ console.log(this); return( <ul> <li>姓名:{this.props.name}</li> <li>年龄:{this.props.age}</li> <li>性别:{this.props.sex}</li> </ul> ) } } //2>.渲染组件标签 const p1 = { name:"Jason", age:18, sex:'男' } ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById("box1")) const p2 = { name:"G.E.M", } //不传递所有属性值,只传递个别属性，其余属性则会使用默认值 ReactDOM.render(<Person name={p2.name} />,document.getElementById("box2")) const p3 = { name:"Jay", age:41, sex:'男' } //通过可变参数传参"{...p3}" ReactDOM.render(<Person {...p3} />,document.getElementById("box3")) const p5 = { name:"尹正杰", age:18, sex:'男' } //使用ES6的类组件 ReactDOM.render(<Person2 {...p5}/>,document.getElementById("box5")) </script> </html>
2>.浏览器打开以上代码渲染结果
三.请区别一下组件的props和state属性
state:
组件自身内部可变化的数据
props:
从组件外部向组件内部传递数据, 组件内部只读不修改