Props
//创建组件
class Person extends React.Component{
render(){
const {name,age,sex} = this.props
return(
<ul>
<li>姓名：{name} </li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
</ul>
)
}
}
//渲染组件到页面
ReactDOM.render( <Person name="tom" age="18" sex="女" /> , document.getElementById('test') )
ReactDOM.render( <Person name="tom3" age="19" sex="男" /> , document.getElementById('test') )
ReactDOM.render( <Person name="tom4" age="28" sex="男" /> , document.getElementById('test') )
const p = { name:'comedy',age:19,sex:'男' }
ReactDOM.render( <Person {...p} /> , document.getElementById('test') )
reduce
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。
reduce 接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
...展开运算符1
let arr1 = [1,3,5,7,9]
let arr2 = [2,4,6,8,10]
console.log(...arr1); //展开一个数组
let arr3 = [...arr1,...arr2]; //连接数组
console.log(arr3);
//在函数中使用
function sum(...numbers){
return numbers.reduce(preValue,currentValue)=>{
return preValue+currentValue
}
}
console.log(sun(1,2,3,4,5,6));
...展开运算符2
//构造字面量对象时使用展开语法
let person = {name:"tom",age:19}
console.log(...person); //报错，展开运算符不能展开对象
let person2 = { ...person }
person.name = 'jerry'
console.log(person2); //person2.name为tom，即不变。
console.log(person); //person.name为jerry
...展开运算符3
//复制对象的同时修改对象的属性(或者说合并)
let person3 = {...person,name:'candy',address="china"}
console.log(person3); //person3.name="candy" person3.address="china"
prop-types库
//创建组件
class Person extends React.Component{
render(){
const {name,age,sex} = this.props
return(
<ul>
<li>姓名：{name} </li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
</ul>
)
}
}
//需要引入prop-types库
//对标签属性进行类型、必要性的限制
Person.propTypes = {
name : PropTypes.string.isRequired , //isRequireds是否为必填项
age : PropTypes.number , //限制age为number
sex : PropTypes.string ,
speak: PropTypes.func, //限制speak为函数
}
Person.defaultProps = { //默认值
sex : '男' , //sex默认值为男
age : 18 , //age默认值为18
}
//渲染组件到页面
ReactDOM.render( <Person name="tom" age="18" sex="女" speak={speak} /> , document.getElementById('test') )
ReactDOM.render( <Person name="tom" age="18" sex="女" /> , document.getElementById('test') )
const p = { name:'comedy',age:19,sex:'男' }
ReactDOM.render( <Person {...p} /> , document.getElementById('test') )
function speak(){
console.log("我说话了");
}
props的简写方式
props是只读的，不可以修改
class Person extends React.Component{
static propTypes = {
name : PropTypes.string.isRequired , //isRequireds是否为必填项
age : PropTypes.number , //限制age为number
sex : PropTypes.string ,
speak: PropTypes.func, //限制speak为函数
}
static defaultProps = { //默认值
sex : '男' , //sex默认值为男
age : 18 , //age默认值为18
}
render(){
const {name,age,sex} = this.props
return(
<ul>
<li>姓名：{name} </li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
</ul>
)
}
}
类式组件里构造器接不接porops说明
class Person extends React.Component{
constructop(props){
//构造器是否接收props,是否传递给super，取决于是否希望在构造器中通过this访问props
super(props);
console.log('constructor' , this.props); //不接props的话this.props为undefined
}
static propTypes = {
name : PropTypes.string.isRequired , //isRequireds是否为必填项
age : PropTypes.number , //限制age为number
sex : PropTypes.string ,
}
static defaultProps = { //默认值
sex : '男' , //sex默认值为男
age : 18 , //age默认值为18
}
render(){
const {name,age,sex} = this.props
return(
<ul>
<li>姓名：{name} </li>
<li>性别：{sex} </li>
<li>年龄：{age} </li>
</ul>
)
}
}
ReactDOM.render( <Person name="comedy" /> , document.getElementById("test1") )
函数式组件使用props
function Person(props){
const {name,age,sex} = props
return (
<ul>
<li>姓名: {name} </li>
<li>性别: {sex} </li>
<li>年龄: {age} </li>
</ul>
)
Person.propTypes = {
name : PropTypes.string.isRequired , //isRequireds是否为必填项
age : PropTypes.number , //限制age为number
sex : PropTypes.string ,
speak: PropTypes.func, //限制speak为函数
}
Person.defaultProps = { //默认值
sex : '男' , //sex默认值为男
age : 18 , //age默认值为18
}
}
ReactDom.render(<Person name="comedy" sex="女" /> , document.getElementById('test') )
Props总结
- 每个组件对象都会有props属性
- 组件标签的所有属性都保存在props中
- 通过标签属性从组件外向组件内传递数据的变化
- 注意：组件内部不要i需改props数据
