react-props属性

最新推荐文章于 2022-04-26 00:33:02 发布

程序媛~~~

最新推荐文章于 2022-04-26 00:33:02 发布

阅读量231

点赞数 3

分类专栏： react

本文链接：https://blog.csdn.net/weixin_57218747/article/details/117430134

版权

react 专栏收录该内容

12 篇文章 6 订阅

订阅专栏

react属性-props属性

一 props 的基本使用

需要理解的概念有：

React中属性的传递方式，与class类的属性设置的差异区别
React中属性的接收方式
解构赋值的处理操作

属性定义传递，属性使用，属性设置（组件标签），属性接收（prop）

	<div id="test"></div>
	<div id="test2"></div>
	<script type="text/babel">
		//定义Person组件
		class Person extends React.Component {
			render() {
				console.log(this)
				// 通过this.props可以接收组件传递过来的属性
				const { name, sex, age } = this.props
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
					</ul>
				)
			}
		}
		// 在class中利用new Person('张三',18,'男')的方式传递属性，
		// 而在React组件当中，则可以利用属性设置的方式进行传递
		ReactDOM.render(<Person name="张三" age="18" sex="男" />, 
    document.getElementById('test'))
		ReactDOM.render(<Person name="李四" age="19" sex="女" />, 
    document.getElementById('test2'))
	</script>
</body>

</html>

二批量传递 props

需要理解的概念有：

属性是否可以修改
解构赋值的内容与props的差异
批量属性传递
展开式语法与React中展开式参数传递

1.props是只读的，不能进行修改

	<div id="test"></div>
	<div id="test2"></div>
	<script type="text/babel">
		class Person extends React.Component {
			render() {
				console.log(this)
				// 通过this.props可以接收组件传递过来的属性
				// 通过解构赋值以后，该值就
				let { name, age, sex } = this.props
				name = name + '!'
				// 为什么解构赋值以后可以修改，直接修改props是只读的？
				// 这是因为解构以后进行的是赋值操作，相当于执行了
				// let name = this.props.name // name直接存放于内存栈中
				// 而name是新设置的一个变量，不再是props的属性内容

				// this.props.name = this.props.name + '!'
				// 该行代码会引起报错，因为props是只读的，只进行接收与显示，不能记性修改
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
					</ul>
				)
			}
		}
		ReactDOM.render(<Person name="张三" age="18" sex="男" />, document.getElementById('test'))
		ReactDOM.render(<Person name="李四" age="19" sex="女" />, document.getElementById('test2'))
	</script>

2.批量传递属性值

	<div id="test"></div>
	<div id="test2"></div>
	<script type="text/babel">
		class Person extends React.Component {
			render() {
				console.log(this)
				let { name, age, sex, address, car } = this.props
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
						<li>位置：{address}</li>
						<li>座驾：{car}</li>
					</ul>
				)
			}
		}
		const p1 = {
			name: '王五',
			age: 32,
			sex: '男',
			address: '上海松江',
			car: '特斯拉'
		}
    
    // 可以正常的打印p1对象
    console.log(p1)
    // 该行不会报错，但也未能展开一个对象
    // 所以React并没有给对象添加遍历器
    console.log(...p1)

		//渲染组件
		ReactDOM.render(<Person name={p1.name}
			age={p1.age}
			sex={p1.sex}
			address={p1.address}
			car={p1.car} />,
			document.getElementById('test'))
		// 批量传递属性
    	// 正常情况下...p1是报错的
    	// 但是react+babel就可以完成{...p1}的属性传递
   		// 不过仅限于标签属性的传递
		ReactDOM.render(<Person {...p1} />, 
		document.getElementById('test2'))
	</script>

3.展开式(spread)语法的回顾

	<script type="text/javascript">
		let obj = { a: 1, b: 2, c: 3 }
		let arr = [1, 3, 5, 7, 9]

		console.log(arr) // [1,3,5,7,9]
		console.log(...arr) // 1 3 5 7 9 --- ...可以展开一个数组的
		//console.log(...obj) //改行代码报错
    	// 1.对象是不可以用...展开
    	// 2.对象是不可以用for...of遍历

		const obj2 = { ...obj } //浅拷贝一个obj赋值给obj2  
		console.log(obj2 === obj)  //false

		const obj3 = { ...obj, b: 200 } //复制(浅)一个obj，且修改b为200，再赋值给obj3
		console.log(obj3)

	</script>

三对 props 进行限制

需要理解的概念有：

属性传递会有数据类型的问题
如何给类添加自身对象属性
利用propTypes进行属性约束
默认属性的设置

1.数据类型的差异导致结果有误

<script type="text/javascript" src="../js/prop-types.js"></script>

	<div id="test"></div>
	<div id="test2"></div>
	<script type="text/babel">
		class Person extends React.Component {
			render() {
				const { name, age, sex, address } = this.props
				console.log(typeof age);//nubmber
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
						<li>住址：{address}</li>
					</ul>
				)
			}
		}
		let p1 = {
			name: '老刘',
			age: 18,
			sex: '女',
			address: '我心里'
		}
		// 批量属性传递时打印出的age为number类型
		ReactDOM.render(<Person {...p1} />, document.getElementById('test'))
		// 单个属性传递的时候打印出的age为string类型
		// 不能直接设置age = 19，应该设置age={19}
		ReactDOM.render(<Person name="老王"
			age="19"
			sex="男"
			address="松江" />,
			document.getElementById('test2'))
	</script>
</body>

2.如何给类添加自身对象属性

	<div id="test"></div>
	<div id="test2"></div>
	<script type="text/babel">
		class Person extends React.Component {
			render() {
				const { name, age, sex, address } = this.props
				console.log(typeof age);
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
						<li>住址：{address}</li>
					</ul>
				)
			}
		}
		// 如果设置了Person.x，那么这个x放置于哪里？
		// 它不会放在组件实例对象上
		// 它也不会放置于Person的原型对象上
		// 它只是放在了Person自身对象上
		Person.x = 1;

		let p1 = {
			name: '老刘',
			age: 18,
			sex: '女',
			address: '我心里'
		}
		// 批量属性传递时打印出的age为number类型
		ReactDOM.render(<Person {...p1} />, 
		document.getElementById('test'))

		ReactDOM.render(<Person name="老王"
			age="19"
			sex="男"
			address="松江" />,
			document.getElementById('test2'))
	</script>

3.利用propTypes进行属性约束

字符串类型，isRequird ：是否是必须，默认设置

	<div id="test"></div>
	<div id="test2"></div>

	<script type="text/babel">
		class Person extends React.Component {
			render() {
				const { name, age, sex, address } = this.props
				console.log(typeof age);
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
						<li>住址：{address}</li>
					</ul>
				)
			}
		}
		Person.x = 1;

		// Person.props规则 = {
		// 	name: '必须传递，且为字符串',
		// 	age: '必须传递，且为数字型',
		// 	sex: '必须传递，且为字符串',
		// 	address: '可选传递，且为字符串',
		// }

		// 因为Person自身对象有限制规则操作
		// 所以，每个实例化对象也都将有会限制规则操作
		// 但React的验证规则是propTypes，由prop-types做支撑
		Person.propTypes = {
			name: PropTypes.string.isRequired,
			age: PropTypes.number.isRequired,
			sex: PropTypes.string.isRequired,
			address: PropTypes.string,
		}
		// 当前数据类型出现不对应，所以会报错

		let p1 = {
			name: '老刘',
			age: 18,
			sex: '女',
			address: '我心里'
		}

		// 批量属性传递时打印出的age为number类型
		ReactDOM.render(<Person {...p1} />, 
		document.getElementById('test'))
		ReactDOM.render(<Person name="老王"
			age="19"
			sex="男"
			address="松江" />,
			document.getElementById('test2'))
	</script>

4.默认属性的设置

	<div id="test"></div>
	<div id="test2"></div>
	<script type="text/babel">
		class Person extends React.Component {
			render() {
				const { name, age, sex, address } = this.props
				console.log(typeof age);
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
						<li>住址：{address}</li>
					</ul>
				)
			}
		}
		Person.x = 1;

		Person.propTypes = {
			name: PropTypes.string.isRequired,
			age: PropTypes.number.isRequired,
			sex: PropTypes.string.isRequired,
			address: PropTypes.string,
		}
		// 当前数据类型出现不对应，所以会报错
		// 给props指定默认值，注意：可传可不传的属性，才需要配置默认值
		Person.defaultProps = {
			address: '松江'
		}

		let p1 = {
			name: '老刘',
			age: 18,
			sex: '女',
			address: '我心里'
		}
		ReactDOM.render(<Person {...p1} />, document.getElementById('test'))
		ReactDOM.render(<Person name="老王"
			age={19}
			sex="男"
		/>,
			document.getElementById('test2'))
	</script>

四 props 的简写方式在类中的理解

需要理解的概念有：

类中的构造方法、一般方法、赋值语句、静态属性
构造方法、一般方法、赋值语句、静态属性的位置

	<script type="text/javascript">
        class Person {
            // 1.构造方法
            constructor(name, age) {
                this.name = name
                this.age = age
            }

            // 2.一般方法
            // 实例对象的原型对象上，隐式原型链上的方法属性
            speak() {
                console.log(`我是叫：${this.name},我今年${this.age}岁了`)
            }

            // 3.赋值语句
            // 类实例所有的属性
            classProp = '实例属性'

            // 4.静态属性
            // 类自身拥有的属性
            static staticProp = '静态属性'
        }

        const p1 = new Person('张三', 19)
        console.log(p1);
        console.log(Person.staticProp);
    </script>

五静态属性配置 props 限制

需要理解的概念有：

利用静态属性简化属性约束的操作

	<div id="test"></div>
	<div id="test2"></div>

	<script type="text/babel">
		class Person extends React.Component {
			static propTypes = {
				name: PropTypes.string.isRequired,
				age: PropTypes.number.isRequired,
				sex: PropTypes.string.isRequired,
				address: PropTypes.string,
			}
			static defaultProps = {
				address: '松江'
			}
			render() {
				const { name, age, sex, address } = this.props
				console.log(typeof age);
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
						<li>住址：{address}</li>
					</ul>
				)
			}
		}

		let p1 = {
			name: '老刘',
			age: 18,
			sex: '女',
			address: '我心里'
		}

		// 批量属性传递时打印出的age为number类型
		ReactDOM.render(<Person {...p1} />, document.getElementById('test'))

		// 单个属性传递的时候打印出的age为string类型
		// 不能直接设置age = 19
		ReactDOM.render(<Person name="老王"
			age={19}   //要用{}格式
			sex="男"
		/>,
			document.getElementById('test2'))
	</script>

六函数式组件使用 props

需要理解的概念有：

函数式组件属性传递的方式是什么
函数式组件属性的约束如何实现

1.函数式组件属性接收与属性约束

	<div id="test"></div>
	<div id="test2"></div>
	<script type="text/babel">
		function Person(props) {
        //比较类组件是this.props，函数式直接设置的是props参数以及直接使用prop参数
			const { name, sex, age, address } = props
			return (
				<ul>
					<li>姓名：{name}</li>
					<li>性别：{sex}</li>
					<li>年龄：{age}</li>
					<li>住址：{address}</li>
				</ul>
			)
		}
   		 console.log(Person)    //person不再是一个函数，而是一个组件
		// 函数式组件中没有staic概念，限制props的类型以及必要性
		Person.propTypes = {
			name: PropTypes.string.isRequired,
			age: PropTypes.number.isRequired,
			sex: PropTypes.string.isRequired,
			address: PropTypes.string,
		}

		// 给props指定默认值，注意：可传可不传的属性，才需要配置默认值
		Person.defaultProps = {
			address: '松江'
		}

		let p1 = {
			name: '老刘',
			age: 18,
			sex: '女',
			address: '我心里'
		}

		ReactDOM.render(<Person {...p1} />, 
		document.getElementById('test'))

		ReactDOM.render(<Person name="老王"
			age="19"
			sex="男"
		/>,
			document.getElementById('test2'))

	</script>

七总结 props

需要理解的概念有：

概念的理解：

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

属性的作用：

通过标签属性从组件外向组件内传递变化的数据
注意：组件内部不要修改props数据

编码的操作：

不管是类组件还是函数式组件，都可以对props中的属性值进行类型限制和必要性限制
不管是类组件还是函数式组件，也都可以进行props的默认值的设置
可以利用扩展属性将对象的所有属性通过props传递

程序媛~~~

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
react-props属性

react属性-props属性一 props 的基本使用需要理解的概念有：React中属性的传递方式，与class类的属性设置的差异区别React中属性的接收方式解构赋值的处理操作属性定义传递，属性使用，属性设置（组件标签），属性接收（prop） <div id="test"></div> <div id="test2"></div> <script type="text/babel"> //定义Person组件 cl
复制链接

扫一扫