react16：props的使用

最新推荐文章于 2023-12-15 10:11:27 发布
最新推荐文章于 2023-12-15 10:11:27 发布
阅读量450 收藏
点赞数
分类专栏： React17/18 文章标签： props 扩展运算符 语法糖 限制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/123873994
版权

文章目录

props的基本使用

props的基本使用：<Person name="张三" gender="男" age="18"/>。

<!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>test</title> 
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>  
    <script type="text/babel">

        class Person extends React.Component{
            render(){
                const {name,age,gender} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Person name="张三" gender="男" age="18"/>,document.getElementById("root"));
    </script>
</body>
</html>

props的语法糖

props的语法糖：<Person {...p1}/>

<!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>test</title> 
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>  
    <script type="text/babel">

        class Person extends React.Component{
            render(){
                const {name,age,gender} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }

        const p1 = {
            name:"李四",
            gender:"男",
            age:"19"
        }
        ReactDOM.render(<Person {...p1}/>,document.getElementById("root"));
    </script>
</body>
</html>

这里涉及到扩展运算符（...）的使用。扩展运算符很常用，以下是它的一些应用场景。

  • 平铺数组。
let arr = [1,3,5]; console.log(...arr); // 1 3 5
  • 连接数组。
let arr1 = [1,3,5];
let arr2 = [2,7,9];
console.log([...arr1,...arr2]); // [1, 3, 5, 2, 7, 9]
  • 函数形参。
function add(...numbers){
    return numbers.reduce((preValue,currentValue) => preValue+=currentValue,0);
}
let sum = add(1,2,3,4,5); console.log(sum); // 15
  • 构建字面量对象。
let obj = {
    a:100,
    b:200
}
const obj2 = {...obj};
console.log(obj2); // {a: 100, b: 200}
  • 合并对象。
let obj = {
    a:"hello",
    b:"world"
}
let obj2 = {
    x:100,
    y:200
}
let obj3 = {...obj,...obj2};
console.log(obj3);  //{a: 'hello', b: 'world', x: 100, y: 200}

限制props

可以对props进行限制，如限制props的类型、必要性，指定默认值。
首先，需要下载并引入prop-types.js，本例使用15.6.2版本，可到这里下载。

<!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>test</title> 
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="root"></div> 
    <div id="app"></div>
    <script type="text/babel">

        class Person extends React.Component{
            render(){
                const {name,age,gender} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }

        Person.propTypes = {
            name:PropTypes.string.isRequired,
            age:PropTypes.number,
            gender:PropTypes.string
        }

        Person.defaultProps = {
            age:20,
            gender:"男"
        }

        ReactDOM.render(<Person name="张三" age="18" gender="男"/>,document.getElementById("root"));
        ReactDOM.render(<Person name="李四" />,document.getElementById("app"));

    </script>
</body>
</html>

propTypes，对props的类型、必要性进行限制

  • name:PropTypes.string.isRequired ，要求name为字符串类型，且必须传。
  • age:PropTypes.number ，要求age为数值类型。
  • gender:PropTypes.string，要求gender为字符串类型。

defaultProps，用于指定props的默认值。

限制props的简写形式

  1. 类中定义的方法，放在类的原型对象上，供所有实例使用。
  2. 类中的赋值语句，等号左侧的属性或方法，放在类的实例对象上。
  3. 类中的赋值语句，前面加static修饰后，等号左侧的属性或方法，会放在类本身。

根据第3点：“类中，static修改的赋值语句，等号左侧的属性或方法，会放在类本身”，可以对props限制进行简写：将propTypes和defaultProps放入类中。如下。

<!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>test</title> 
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="root"></div> 
    <div id="app"></div>
    <script type="text/babel">

        class Person extends React.Component{
            static propTypes = {
                name:PropTypes.string.isRequired,
                age:PropTypes.numbers,
                gender:PropTypes.string
            }
            
            static defaultProps = {
                age:20,
                gender:"男"
            }

            render(){
                const {name,age,gender} = this.props;
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{gender}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }

        Person.propTypes = {
            name:PropTypes.string.isRequired,
            age:PropTypes.number,
            gender:PropTypes.string
        }

        Person.defaultProps = {
            age:20,
            gender:"男"
        }

        ReactDOM.render(<Person name="张三" age="18" gender="男"/>,document.getElementById("root"));
        ReactDOM.render(<Person name="李四" />,document.getElementById("app"));

    </script>
</body>
</html>
richest_qi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React-Native中props具体使用详解
08-29
React-Native中props的详细使用解释 React-Native中的props是为了描述一个...4. 简洁代码：使用延伸操作符和解构赋值可以简洁代码。 props是React-Native中的一个重要概念，它可以帮助我们更好地组织代码和传递数据。
React16入门4-Props
buyue
12-02 773
state 和 props 主要的区别在于props是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
深入了解 React 16 中的父子组件通信
limuzi666的博客
12-15 394
React 作为一个强大的 JavaScript 库，通过组件化的思想构建用户界面。在 React 16 中，父子组件之间的通信是构建复杂应用的关键。在这篇博文中，我们将深入探讨 React 16 中父子组件通信的不同方法。
React 版本16以后，PropsTyple被独立出来了。
qq_38719039的博客
03-29 461
import PropTypes from 'prop-types';
props几种使用方法
高速小白的博客
02-19 3354
props几种使用方法1.单向数据流传递:2.动态props传递：3.通过Prop验证传递：4.通过Prop传递函数：5.默认Prop值：
props的用法
huangsuirui的博客
11-07 2449
无
React中的Props：组件间通信的关键
最新发布
06-19
本文将详细探讨React中props的概念、作用以及使用方式。 React是一个用于构建用户界面的声明式JavaScript库，它通过组件化的方式让开发者能够构建复杂的UI。在React中，组件间的通信主要依赖于props（属性）和state...
React教程之Props验证的具体用法（Props Validation）
08-29
React教程之Props验证的具体用法（Props Validation）是React框架中的一种非常重要和有用的机制，它可以帮助开发者确保组件的正确使用，避免随着应用程序的复杂性增加而出现的bug和问题。Props验证可以使程序变得更...
react-terminal：:rocket:渲染终端的React组件:desktop_computer:
02-06
:rocket:安装使用NPM或YARN安装软件包并将其添加到您的开发依赖项中： npm install --save-dev react-terminal要么yarn add --dev react-terminal用法import { ReactTerminal } from "react-terminal";function ...
ReactNative中props使用详解共4页.pdf
10-30
总的来说，掌握ReactNative中的props使用是构建高效、可复用组件的关键。通过props，你可以实现组件间的通信，控制组件的行为，并实现动态渲染。理解并熟练运用这些知识点，将极大地提升你的ReactNative开发能力。
Vue中props的使用详解
08-27
props属性是父子组件之间的通信桥梁。这篇文章主要介绍了Vue中props的使用,需要的朋友可以参考下
React16.8中关于children和render props的认知
水痕
05-27 1143
一、组件的创建方式 1、使用createClass方式创建(已经被淘汰了) 2、类组件 import React, { Component } from 'react' export default class Components1 extends Component { render() { return <div /> } } 3、函数组件(比较推...
React16新的生命周期函数getDerivedStateFromProps的使用，你也许并不需要派生状态【译】
热门推荐
乌鸦的专栏
06-27 4万+
新的生命周期函数getDerivedStateFromProps的使用，你也许并不需要派生状态【译】 原文：You Probably Don’t Need Derived State React16.4包含一个关于getDerivedStateFromProps的bugfix，可以让React组件中的一些现有bug以更一致的方式重现。如果这次变动导致了您的应用程序使用了反模式，并且出现...
react16：函数组件中使用props
richest_qi的博客
04-01 1687
函数组件中也可以使用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
React16变更汇总
乌鸦的专栏
12-12 1718
自2017年9月React正式发布了16以来，已经有一年多的时间。相信各项目也都已经完成了升级工作，相信这个过程应该是轻松愉快的。当然，前提是你的项目之前升级过15.6或者之后的任意版本，去除掉了各种警告。那么你有关注过16为我们带来了什么吗？它有哪些让人欣喜的变化？这篇文章主要摘取了一些影响我们未来开发或者令人欣喜的新特性新做以总结。 Fiber 生命周期函数 Context Refs F...
React16.5-基础1
xuxuan1997的博客
09-21 428
我之前用Angular写项目时已经安装过Nodejs了，打开Webstorm开始创建React项目。 创建React npx create-react-app my-app  创建时失败了几次，试遍了网上的方法都没用，我删除了重新创建。成功后的界面如下： 运行 npm start  index.js import React from 'react'; import R...
react v16后PropType报错问题
前端小口袋
06-19 350
react v15之前使用 import React, {PropTypes} from 'react'; 导入PropTypes，在react v16以后 PropTypes被单独分离出来使用 import PropType from 'prop-types'; 引入
10、React系列之--props属性
TigerChain 的码之路
04-18 2236
版权声明：本文为博主原创文章，未经博主允许不得转载。 PS:转载请注明出处 作者:TigerChain 地址:http://www.jianshu.com/p/fa81cebac3ef 本文出自TigerChain简书React 教程系列1、React之props属性我们想要在组件之间进行传值，那么props属性就起到了这个作用,在React中props和state是两个非常非常非常重要的属性
组件传递数据——props（父传子）
weixin_46372993的博客
08-03 4938
props的用法（1）Parent组件：< template > < h3 > {{ message }} < Child /> //3、显示Child组件内容 < script > import Child from './Child.vue';//1、导入Child组件 export default {data() {return {Child } //2、注入Child组件 }
React 实战：设计模式和最佳实践1
08-04
Context，在第 8 小节会详细介绍。小结本节介绍了使用 React 的基本思想，希望读者能够学习到：1. 在 React 中，界面完全由数据驱动；2. 在

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值