深圳网站建设列表网,昆明做网站建设的公司哪家好,t恤定制平台,中国建设银行吉林分行网站一、props 了解
理解
1、每个组件对象都会有 props#xff08;properties的简写#xff09;属性
2、组件标签的所有属性都保存在 props 中
作用
通过标签属性从组件外向组件内传递变化的数据
注意
组件内部不要修改 props 数据
二、案例
需求#xff1a;自定义用来…一、props 了解
理解
1、每个组件对象都会有 propsproperties的简写属性
2、组件标签的所有属性都保存在 props 中
作用
通过标签属性从组件外向组件内传递变化的数据
注意
组件内部不要修改 props 数据
二、案例
需求自定义用来显示一个人员信息的组件
姓名必须指定且为字符串类型
性别为字符串类型如果性别没有指定默认为男
年龄为字符串类型默认为18
1、基本使用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleprops基本使用/title
/head
body!-- 准备好一个“容器” --div idtest1/divdiv idtest2/divdiv idtest3/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel// 1、创建组件class Person extends React.Component {// state是在组件内部定义数据通过 this.state.xxx 访问// state { name: jerry, sex: 男, age: 19 }render() {console.log(this) // Person组件的实例对象// 通过Person组件实例的props属性接收外部传入数据const { name, sex, age } this.propsreturn (ulli姓名{ name }/lili性别{ sex }/lili年龄{ age }/li/ul)}}// 2、渲染组件到页面ReactDOM.render(Person namejerry sex男 age{19}/, document.getElementById(test1))ReactDOM.render(Person nametom sex女 age{18}/, document.getElementById(test2))// 模拟api返回数据处理批量传递属性const p { name: 老刘, sex: 女, age: 18 }// ReactDOM.render(Person name{p.name} sex{p.sex} age{p.age}/, document.getElementById(test3))// 简写 返回数据p中的数据项(name、sex、age...)必须存在否则取不到值ReactDOM.render(Person {...p}/, document.getElementById(test3))/* ... 展开运算符 */// Person {...p}/ 中的 {} 代表要在此处写js表达式并不是字面量对象// ... 不能遍历对象babelreact 允许使用 ... 遍历对象仅适用于标签属性传递console.log(展开运算符, ...p)/script
/body
/html2、对 props 进行限制
React 中使用 propTypes 对标签属性进行类型、必要性的限制
React.PropTypes 形式 React v15.5 开始已弃用
React v15.5 及以后版本以后引入 prop-types 库对组件标签属性进行限制
React 中使用 defaultProps 指定默认标签属性值
!DOCTYPE html
html langen
headmeta charsetUTF-8title对props进行限制/title
/head
body!-- 准备好一个“容器” --div idtest1/divdiv idtest2/divdiv idtest3/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/script!-- 引入prop-types用于对组件标签属性进行限制全局有PropTypes对象 --script typetext/javascript src../js/prop-types.js/scriptscript typetext/babelclass Person extends React.Component {render () {const { name, sex, age } this.props// this.props.speak() // 执行传入方法// props是只读的// this.props.name jack // 此行代码会报错因为props是只读的return (ulli姓名{ name }/lili性别{ sex }/lili年龄{ age 1 }/li/ul)}}// 伪代码Person.属性规则 {name: 必传字符串,sex: 非必传字符串默认男,age: 非必传数字默认18}// React 中使用 propTypes 对标签属性进行类型、必要性的限制Person.propTypes {// name: React.PropTypes.string.isRequired, // React v15.5 开始已弃用name: PropTypes.string.isRequired, // 限制name必传且为字符串sex: PropTypes.string, // 限制sex为字符串age: PropTypes.number, // 限制age为数字speak: PropTypes.func // 限制speak为函数function会和关键字冲突改为使用func}// React 中使用 defaultProps 指定默认标签属性值Person.defaultProps {sex: 男, // sex默认值为男age: 18 // age默认值为18}ReactDOM.render(Person namejerry speak{speak}/, document.getElementById(test1))ReactDOM.render(Person nametom sex女 age{18} speak{speak}/, document.getElementById(test2))// 给实例传入方法限制传入方法必须为函数function speak() {console.log(我说话了)}/script
/body
/html3、props 的简写方式
使用 static 关键字给类自身添加属性将 propTypes、defaultProps 写在类中
!DOCTYPE html
html langen
headmeta charsetUTF-8title对props进行限制/title
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/script!-- 引入prop-types用于对组件标签属性进行限制 --script typetext/javascript src../js/prop-types.js/scriptscript typetext/babelclass Person extends React.Component {constructor(props) {// 构造器是否接收props是否传递给super取决于是否希望在构造器中通过this访问props// console.log(props)super(props)console.log(constructor, this.props)}/* 简化写法使用static关键字给类自身添加属性 */// 对标签属性进行类型、必要性的限制static propTypes {name: PropTypes.string.isRequired, // 限制name必传且为字符串sex: PropTypes.string, // 限制sex为字符串age: PropTypes.number, // 限制age为数字}// 指定标签默认属性值static defaultProps {sex: 男, // sex默认值为男age: 18 // age默认值为18}render() {const { name, sex, age } this.propsreturn (ulli姓名{name}/lili性别{sex}/lili年龄{age 1}/li/ul)}}ReactDOM.render(Person namejerry /, document.getElementById(test))/script
/body
/html4、函数组件使用 props
函数式组件可以通过接收参数形式使用 propsprops 会收集所有传递的标签属性
!DOCTYPE html
html langen
headmeta charsetUTF-8title对props进行限制/title
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/script!-- 引入prop-types用于对组件标签属性进行限制 --script typetext/javascript src../js/prop-types.js/scriptscript typetext/babelfunction Person(props) {const { name, age, sex } propsreturn (ulli姓名{ name }/lili性别{ sex }/lili年龄{ age }/li/ul)}// React 中使用 propTypes 对标签属性进行类型、必要性的限制Person.propTypes {name: PropTypes.string.isRequired, // 限制name必传且为字符串sex: PropTypes.string, // 限制sex为字符串age: PropTypes.number, // 限制age为数字}// React 中使用 defaultProps 指定标签默认属性值Person.defaultProps {sex: 男, // sex默认值为男age: 18 // age默认值为18}ReactDOM.render(Person namejerry /, document.getElementById(test))/script
/body
/html三、展开运算符了解
!DOCTYPE html
html
headmeta charsetUTF-8 /titleDocument/title
/headbodyscript typetext/javascriptlet arr1 [1, 3, 5, 7, 9]/* 1、展开一个数组 */console.log(...arr1) // 1 3 5 7 9/* 2、连接数组 */let arr2 [2, 4, 6, 8, 10]let arr3 [...arr1, ...arr2]console.log(arr3) // [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]/* 3、不定参数在函数中使用 */function sum(...numbers) {return numbers.reduce((preValue, currentValue) {return preValue currentValue})}console.log(sum(1, 2, 3, 4)) // 10/* 4、构造字面量对象时使用展开语法 */let person { name: tom, age: 18 }// 4.1、深拷贝一层let person2 { ...person } person.name jerryconsole.log(person) // {name: jerry, age: 18}console.log(person2) // {name: tom, age: 18}// console.log(...person) // 报错展开运算符不能展开对象// 4.2、合并let person3 { ...person, name: jack, address: 地球 }console.log(person3) // {name: jack, age: 18, address: 地球}/script
/body
/html
