• 极智开发 | 讲解 React 组件三大属性之二：props

      欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享

      大家好，我是极智视界，本文讲解一下 React 组件三大属性之二：props。

      React 组件，从概念上类似于 JavaScript 函数，它接受任意的入参，并返回用于描述页面展示内容的 React 元素。React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。React 组件具有三大属性，即：state、props、refs。这里讲解三大属性之二：props，要学习 state 的同学可以移步我的这篇《极智开发 | 讲解 React 组件三大属性之一：state》 。

    文章目录

    1. props 理解

     上一篇咱们已经讲了 state，我们知道 state 主要用来控制 组件状态。props 相对于 state 主要有几点区别：

    • state 是可读可写的，可与用户进行交互修改，而 props 是只读的；
    • state 主要用于控制 组件自身，而 props 可以用于组件本身的信息传递，也适用于 组件间 的数据传递，特别是 父子组件 间的信息传递；

      我们在设计一个组件的时候，肯定希望这个组件能够复用，所以在设计的时候 往往不希望把组件的传参 写死， 而是可以动态的把 组件里需要的 数据传递进去，以提高组件的 灵活性，这个时候就需要用到咱们的 props。

      React 文档中，对 props 这么进行解释：

    当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

      可以看出，props 最重要的作用还是子组件间的信息传递。

      下面让我们来看几个示例。


    2. props 示例

      来看一个 props 的基本使用示例：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React组件属性之二：props基本使用title>
head>
<body>
	<div id="demo0">div>
	<div id="demo1">div>
	<div id="demo2">div>
	
	
	<script type="text/javascript" src="./react.development.js">script>
	
	<script type="text/javascript" src="./react-dom.development.js">script>
	
	<script type="text/javascript" src="./babel.min.js">script>

	<script type="text/babel">
		// 1. 创建组件
		class Person extends React.Component{
			render(){
				const {name, age, sex, height} = this.props
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
						<li>身高：{height}</li>
					</ul>
				)
			}
		}
		// 2. 渲染组件到页面
		ReactDOM.render(<Person name="八戒" age={300} sex="男" height={200}/>, document.getElementById('demo0'))
		ReactDOM.render(<Person name="悟空" age={500} sex="男" height={220}/>, document.getElementById('demo1'))
        // 使用展开运算符进行传参的方式
		const p = {name:'蜘蛛精', age:19, sex:'女', height:180}
		ReactDOM.render(<Person {...p}/>, document.getElementById('demo2'))
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

      以上通过 props 将 外部的 Person 属性 =>name、sex、age、height 进行动态传递，在调用组件 render 进行渲染的时候灵活度就会高很多。props 除了能够往组件里面传参，还能够限制传参的类型，这能提高软件的自身核验能力。来看是什么做的呢，还是基于上面的例子：

    DOCTYPE html>
<html lang="en">
<head>
    ...
head>
<body>
	...
	<script type="text/babel">
		// 1. 创建组件
		...
		// 对标签属性进行类型、必要性的限制
		Person.propTypes = {
			name:PropTypes.string.isRequired,  // 限制name必传，且为字符串
			sex:PropTypes.string,              // 限制sex为字符串
			age:PropTypes.number,              // 限制age为数值
			height:PropTypes.number,           // 限制height为数值
		}
		// 2. 渲染组件到页面
		...
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

      对传参做了以上限制后，如果在渲染的时候传参类型不符合，就会抛出错误提示，这样可以很好的做到 都按我说的来 。 同样，我们也可以对上述的例子进行一个简写：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React组件属性之二：props简写title>
head>
<body>
	<div id="demo">div>
	
	
	<script type="text/javascript" src="./react.development.js">script>
	
	<script type="text/javascript" src="./react-dom.development.js">script>
	
	<script type="text/javascript" src="./babel.min.js">script>
	
	<script type="text/javascript" src="./prop-types.js">script>

	<script type="text/babel">
		// 1. 创建组件
		class Person extends React.Component{
            // 构造函数
			constructor(props){
				super(props)
			}

			// 对标签属性进行类型、必要性的限制
            static propTypes = {
                name:PropTypes.string.isRequired,  // 限制name必传，且为字符串
                sex:PropTypes.string,              // 限制sex为字符串
                age:PropTypes.number,              // 限制age为数值
                height:PropTypes.number,           // 限制height为数组
		    }
			
			render(){
				const {name, age, sex, height} = this.props
				//this.props.name = 'jack' // 此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
						<li>身高：{height}</li>
					</ul>
				)
			}
		}

		// 2. 渲染组件到页面
		ReactDOM.render(<Person name="悟空" age={500} sex="男" height={220}/>, document.getElementById('demo'))
	script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

      以上把控制传参的逻辑放到了 组件构建 里面，这样一来，逻辑就更加清晰了，总的来说只有两步：(1) 创建组件；(2) 渲染组件到页面。

      说了这么多，是不是觉得还没说到 props 在 父子组件中信息传递 的方式，其实不然，来看 Person 组件的构造：

    class Person extends React.Component{...}

    • 1

      可以看到 Person 类其实是继承了 React.Component ，可能由于 React.Component 里面是什么，不是那么直观，所以导致 props子组件信息传方式，看起来也不够直观, 其实这里 this.props 就是 props 父传子 的方式。没事，咱们继续举例子。 下面是一个 子传父 的例子：

    // 1. 创建父组件
class Parent extends React.Component {
    getName = (name) => {
        // 输出接收到子组件的参数
        console.log(name)
    }

    render() {
        // 以函数的方式定义传值
        return (
            <div>
                <Children getName={this.getName}/>
            div>
        )
    }
}

// 2. 创建子组件
class Children extends React.Component {
    render() {
        // 通过父组件的方法进行传值
        this.props.getName('爸爸')
        return (
            <div>div>
        )
    }
}

// 3. 渲染组件到页面
ReactDOM.render(<Parent/>, document.getElementById('root'))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

      以上调用了 Parent 组件渲染到页面，控制台会输出 爸爸，也就是父组件在 render 函数中可以直接获取到 子组件 传递过来的参数，并进行展示。其实仔细分析一下，上面的组件 Parent、Children 之间的信息传递 也可以认为是兄弟组件之间的信息传递，因为它们同样继承于 React.Component ，而且 爸爸和孩子 往往也是好兄弟啊。


      好了，以上分享了 讲解 React 组件三大属性之二：props。希望我的分享能对你的学习有一点帮助。


     【公众号传送】

    《极智开发 | 讲解 React 组件三大属性之二：props》


    在这里插入图片描述

    扫描下方二维码即可关注我的微信公众号【极智视界】，获取我的更多经验分享，让我们用极致+极客的心态来迎接AI ！

  • 相关阅读:
    【机器学习Q&A】数据抽样和模型验证方法、超参数调优以及过拟合和欠拟合问题
    k8s集群部署禅道项目
    springMVC02,restful风格,请求转发和重定向
    Socket发送缓冲区接收缓冲区快问快答
    计算机竞赛 深度学习+opencv+python实现车道线检测 - 自动驾驶
    基于springboot+vue水务报修处理系统
    MySQL子查询，函数，事务
    查找总价格为目标值的两个商品 ---- 双指针
    寻找小竹!(DFS+素数筛变形筛不同质因数个数)
    【openstack】卷迁移导致的虚机热迁移失败问题排查及解决
  • 原文地址：https://blog.csdn.net/weixin_42405819/article/details/126149210