【05】基础知识：React组件实例三大核心属性 - props

最新推荐文章于 2024-08-29 13:07:02 发布
最新推荐文章于 2024-08-29 13:07:02 发布
阅读量733 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45559449/article/details/133815775
版权

一、props 了解

理解

1、每个组件对象都会有 props（properties的简写）属性

2、组件标签的所有属性都保存在 props 中

作用

通过标签属性从组件外向组件内传递变化的数据

注意

组件内部不要修改 props 数据

二、案例

需求：自定义用来显示一个人员信息的组件

姓名必须指定，且为字符串类型；

性别为字符串类型，如果性别没有指定，默认为男

年龄为字符串类型，默认为18

1、基本使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>props基本使用</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/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.props
				return (
					<ul>
						<li>姓名：{ name }</li>
						<li>性别：{ sex }</li>
						<li>年龄：{ age }</li>
					</ul>
				)
			}
		}

		// 2、渲染组件到页面
		ReactDOM.render(<Person name="jerry" sex="男" age={19}/>, document.getElementById('test1'))
		ReactDOM.render(<Person name="tom" 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表达式，并不是字面量对象
		// ... 不能遍历对象，babel+react 允许使用 ... 遍历对象，仅适用于标签属性传递
		console.log('展开运算符', ...p)
	</script>
</body>
</html>

2、对 props 进行限制

React 中使用 propTypes 对标签属性进行类型、必要性的限制

React.PropTypes 形式 React v15.5 开始已弃用

React v15.5 及以后版本以后引入 prop-types 库，对组件标签属性进行限制

React 中使用 defaultProps 指定默认标签属性值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制，全局有PropTypes对象 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		class Person extends React.Component {
			render () {
				const { name, sex, age } = this.props
				// this.props.speak() // 执行传入方法

				// props是只读的
				// this.props.name = 'jack' // 此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{ name }</li>
						<li>性别：{ sex }</li>
						<li>年龄：{ 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 name="jerry" speak={speak}/>, document.getElementById('test1'))
		ReactDOM.render(<Person name="tom" sex="女" age={18} speak={speak}/>, document.getElementById('test2'))

		// 给实例传入方法，限制传入方法必须为函数
		function speak() {
			console.log('我说话了')
		}
	</script>
</body>
</html>

3、props 的简写方式

使用 static 关键字，给类自身添加属性；将 propTypes、defaultProps 写在类中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		class 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.props
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
					</ul>
				)
			}
		}

		ReactDOM.render(<Person name="jerry" />, document.getElementById('test'))
	</script>
</body>
</html>

4、函数组件使用 props

函数式组件，可以通过接收参数形式使用 props；props 会收集所有传递的标签属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>对props进行限制</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		function Person(props) {
			const { name, age, sex } = props
			return (
				<ul>
					<li>姓名：{ name }</li>
					<li>性别：{ sex }</li>
					<li>年龄：{ 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 name="jerry" />, document.getElementById('test'))
	</script>
</body>
</html>

三、展开运算符了解

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>

<body>
	<script type="text/javascript">
		let 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 = 'jerry'
		console.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>
天边月_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深度讲解React Props
grooyo的博客
11-14 1776
每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据注意:组件内部不要修改props数据使用propTypes 属性并配合prop-types 三方库实现prop验证（不用另外下载，已集成在脚手架中）
React中的props
Like_wind_的博客
02-24 294
props无论在vue还是react中都算是一个重要的组件属性了，在这里就简单介绍一下react中props的使用 在react中一个组件就是一个类，一个类也就是一个组件了，而组件的特性就是可多次复用，组件可多次复用，但组件内部的值可就不能重复了，如图 这是锤子官网手机端个人中心和购物车两个页面的顶部，很明显这是一个组件进行复用的，而我们要做到这一步就需要props了 props是一个对象，他...
React之props详解
subsistent的博客
04-09 3265
1.props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props纯函数：输入一定，输出一定确定总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件props对象的键值，但是不能直接更改 props。3.通过函数创建的组件，需要通过函数的参数来接收props，通过类创建的组件，需要通过this.props来接收。
react中props详解
white-hang的博客
12-27 7422
本文主要介绍了react中的props详细的使用方法
React props
MW
03-25 116
props props是react中一个重要的属性， 是组件对外的接口 我们props 就可以从组件的内部进行数据的传递 也可以完成父组件给子组件的数据传递 注意：无论是无状态组件还是类组件 我们都不能修改自身的props props无状态组件实践 <!DOCTYPE html> <html lang="en"> <head> <meta char...
React：组件实例三大属性之(props)
Continue的博客
06-27 385
????个人理解，如有不对，欢迎讨论 文章目录概述基本使用传入类型限制默认值写入类组件内部函数组件使用props 概述 react组件实例中共有三大属性，分别为state、props、refs。其中props，是properties的简写，字面意思为“属性”，在组件上绑定的属性都在props里。 作用： 通过标签属性从组件外向组件内传递变化的数据 注意： props属性是只读的，也就是不能修改，只能读取 基本使用 <!-- 创建容器标签 --> <div id="root
react组件的属性(props)
weixin_41111563的博客
09-21 317
** 组件的属性(props) ** 调用组件时，跟在组件中的一个或多个称为组件的属性，格式如<组件名 属性名1=属性值1 属性名2=属性值2 .../>这就是组件完成自上而下单向数据传递的一个概念，让组件之间传递数据；这就是props（组件的属性）传数据的方式，接收数据的目标组件如何取得传递的数据？ this代表组件本身，组件自身的内部会拿到一个对象，这个对象有多个属性，其中有一个属...
react-firebase-example:react-firebase-example
05-07
在"react-firebase-example"中，你将会看到如何创建React组件，以及如何通过props和state管理数据。React的生命周期方法，如`componentDidMount`和`componentDidUpdate`，也在项目中扮演关键角色，用于初始化...
react-projects:React项目。 开源的
04-18
1. **React组件**：React的核心概念就是组件，它是可复用的代码块，能够独立处理UI的一部分。组件可以嵌套，通过props传递数据，通过state管理状态。了解如何编写和组合组件是掌握React的关键。 2. **JSX语法**：...
react-978-1-7895-3052-0:开始React
05-30
《React-978-1-7895-3052-0:开始React》这本书是针对初学者的React技术指南，旨在帮助读者掌握React的基础知识和实践技巧。React是由Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合构建复杂的单页应用...
react-primer:React底漆
06-23
4. **生命周期方法**：React组件有特定的生命周期方法，如`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`，这些方法在组件的不同阶段被调用，用于执行特定任务。 5. **虚拟DOM**：React使用...
React基础入门(JSX与React组件基础,进阶) --第二篇
Bioye_的博客
07-27 368
接着上篇补充一下JSX的剩余基础知识 1. JSX 中使用 JavaScript 表达式 嵌入 JS 表达式 数据存储在JS中 语法：{ JavaScript表达式 } 注意：语法中是单大括号，不是双大括号！ const name = 'Jack' const dv = ( <div>你好，我叫：？？？</div> ) 嵌入 JS 表达式 const name = 'Jack' const dv = ( <div>你好，我叫：{name}</div> )
react--Props
郑怪兽
09-08 93
Props属性验证 import One from "./components/one" class App extends Component{ render(){ let userArr = [ {id:1,sex:"男"}, {id:2,sex:"女"} ] return ( <div> <One num={true} userArr={userArr}/> </div>
react之props
qq_29055201的博客
05-10 147
react之props（属性），是纯函数的写法，不允许修改，props表示函数的输入。函数的输出是一个reactElement 用一个函数表示：V = f(props)
react--props
xiaowei的博客
03-07 422
一、react的props用以父组件向子组件传递参数 如下例所示： 1、propTypes用于验证props的类型。 2、getDefaultProps用于设置props的默认值。 3、在父组件中通过属性的方式，传递给子组件&lt;SubMessage messages={this.state.subMessages}/&gt;，子组件中使用this.props.messages得到父组件...
React中props
Aaron Con的博客
04-24 1136
总结React中props的各种应用场景
对于前端react如果有多个相同模块设置及回显的处理，比如多个年份下的数据的设置及回显
最新发布
qq18346342939的博客
08-29 76
【代码】对于前端react如果有多个相同模块设置及回显的处理，比如多个年份下的数据的设置及回显。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值