props的理解和使用

理解：
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中

作用：
1.通过标签属性从组件向外组件内传递变化的数据
2.注意：组件内部不要修改props数据(props是只读的)

操作：
1.内部读取某个属性值

this.props.name

2.对props中的属性值进行类型限制和必要性限制
使用prop-types库进行限制（需要引入prop-types库）

Person.propTypes = {name:PropTypes.string.isRequired, //限制name必传，且为字符串age:PropTypes.number//限制age为数值
}

3.扩展属性：将对象的所有属性通过props传递

<div id='test'></div>
<div id='test1'></div>
<script type="text/babel">//1.创建组件class Person extends React.Component{render(){console.log(this)//读取状态const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>}}//2.渲染组件到页面//普通传值ReactDOM.render(<Person name="掌声" age="20" sex="男"/>,document.getElementById('test'))//多个参数传值const p = {name="lisi" age=18 sex="女"}console.log(...p)//报错，展开运算符不能展开对象ReactDOM.render(<Person {...p}/>,document.getElementById('test1'))//展开运算符展开对象，只适用于标签属性的传递
</script>

4.默认属性值

Person.defaultProps = {name:'tom',age:20
}

5.函数式组件使用props（只有props能使用），不需要写render

<div id='test'></div>
function Person(props){const {name,age,sex} = propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>)
}
//对标签属性进行类型，必要性的限制
Person.propTypes = {name:PropTypes.string.isRequired,//限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number//限制age为数值
}
//指定默认标签属性值
Person.defaultProps = {name:'tom',age:20
}
//渲染组件到页面
ReactDOM.render(<Person name="lili"/>,document.getElementById('test'))

props基本使用:

<div id='test'></div>
<script type="text/babel">//1.创建组件class Person extends React.Component{render(){console.log(this)//读取状态const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>}}//对标签属性进行类型，必要性的限制Person.propTypes = {name:PropTypes.string.isRequired,//限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number，//限制age为数值speak:PropTypes.func//限制speak为函数}//指定默认标签属性值Person.defaultProps = {name:'tom',age:20}function speak(){console.log("讲话了.....")}//2.渲染组件到页面ReactDOM.render(<Person name="掌声" speak={speak}/>,document.getElementById('test'))

props简写(将限制和默认值移到类中)：关键字：static

<div id='test'></div>
<script type="text/babel">//1.创建组件class Person extends React.Component{//构造器与props的关系:构造器是否接受 props,是否传递给 super//取决于：是否希望在构造函数中通过 this 访问 propsconstructor(props){//构造器可省略不写console.log(props)//在React.Component子类实现构造函数时，在其他语句之前调用，否则this.props在构造函数中可能会出现未定义的bugsuper(props)//只要有构造器，必写super console.log('constructor'，this.props)//this.props为undefined}//对标签属性进行类型，必要性的限制static propTypes = {name:PropTypes.string.isRequired,//限制name必传，且为字符串sex:PropTypes.string,//限制sex为字符串age:PropTypes.number，//限制age为数值}//指定默认标签属性值static defaultProps = {name:'tom',age:20}render(){console.log(this)//读取状态const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age}</li></ul>}}//2.渲染组件到页面ReactDOM.render(<Person name="掌声"/>,document.getElementById('test'))

props的理解和使用相关推荐

TypeScript + React 学习render props
###前言一直想学学TypeScript,尝试尝试带类型的js怎么写,有啥优点.正好这两天有时间结合着react写写小例子. 搭建环境不想折腾webpack来自己配ts+react的环境就用typ ...
讲讲React中的State和Props
基本概念在React中,组件的数据存储在props和state中. 一个组件的显示形态可以由数据状态和外部参数所决定. 外部参数--props 组件从概念上可以理解为一个函数,因为函数也是封装一个独 ...
尚硅谷笔记——React组件的三大属性props、state、ref
state 理解 state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新 ...
taro框架props解构jsx标签，不渲染的问题
如果你也遇到这个问题,大概率说明你没有认真读过taro的文档,是不是有点气, 我敢这么说是因为我就是,遇到了这个坑才想起来认真去看看文档. 不过踩坑这个过程也是必要的,单纯地枯燥的看文档并不是最好的方 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
Vue2.x-01点击按钮弹出子Vue组件，遍历JSON展示数据
文章目录概述实现过程 Step1: 父组件设置Button按钮 Step2: 这里使用了showHandlerFlag来控制子组件是否显示,所里需要在data中定义下这个变量 Step3: 引用声 ...
react-props属性
react属性-props属性一 props 的基本使用需要理解的概念有: React中属性的传递方式,与class类的属性设置的差异区别 React中属性的接收方式解构赋值的处理操作属性定义 ...
React常见面试题及答案
写在前面 CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典话 ...
React+DVA开发实践
原文链接文档概述本文档在前面章节简单的介绍了React和其相关的一系列技术,最后章节介绍了React+Dva开发的整套过程和基本原理,也就是将一系列框架整合的结果. 文档结构本文档划分为以下章节 ...

props的理解和使用

props的理解和使用相关推荐

最新文章

热门文章