【React 全家桶】React组件（类式）实例对象的三大属性2-props

最新推荐文章于 2023-10-31 11:29:39 发布
最新推荐文章于 2023-10-31 11:29:39 发布
阅读量529 收藏
点赞数 1
分类专栏： React 全家桶 文章标签： react.js 前端 前端框架 reactjs 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46318413/article/details/122477594
版权

React组件（类式）实例对象的三大属性2-props

一、props的理解

props就是组件标签上的属性，如 name , age , sex 都是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>jsx使用react</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        class Person extends React.Component {
            render() {
                // 解构
                const { name, age, sex } = this.props;
                //年龄加1
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age + 1}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        }
        //如果不使用{}那就是字符串，年龄+1之后就是131
        ReactDOM.render(<Person name="tom" age="13" sex="女" />, document.getElementById('test'));
        //值为数字的话需要使用{}
        ReactDOM.render(<Person name="jack" age={12} sex="女" />, document.getElementById('test1'));
        const p = { name: 'Dai', age: 20, sex: '男' };
        //...p批量传递标签属性
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'));
    </script>
</body>

</html>

在这里插入图片描述

三、对 props 进行限制

需要引入prop-types.js。
cdn：https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js

主要是对 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>jsx使用react</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 引入prop-types，对组件标签的属性进行限制 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        class Person extends React.Component {
            render() {
                // 解构
                const { name, age, sex } = this.props;
                // this.props.name = '123';//会报错，因为props是只读的
                //年龄加1
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age + 1}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        }
        //定义props的类型、是否必须
        Person.propTypes = {
            name: PropTypes.string.isRequired,//name必需，且为字符串
            age: PropTypes.number,
            sex: PropTypes.string,
            speak: PropTypes.func,//speak是一个函数，这里要主要函数为func，不能写function
        }
        //定义props的默认值
        Person.defaultProps = {
            sex: "男",//sex默认值为男
        }
        function speak() {
            console.log('speak')
        }
        ReactDOM.render(<Person name="tom" age={2} speak={speak} />, document.getElementById('test'));
        ReactDOM.render(<Person name="jack" age={12} sex="女" />, document.getElementById('test1'));
        const p = { name: 'Dai', age: 20, sex: '男' };
        //...p批量传递标签属性
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'));
    </script>
</body>

</html>

简写形式：
主要是将 propTypes 和 defaultProps 放到类中，使用 static 将这两个属性规定为只能被类调用。

<!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>jsx使用react</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 引入prop-types，对组件标签的属性进行限制 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        class Person extends React.Component {

            //static的作用是使它成为Person这个类的属性
            //定义props的类型、是否必须
            static propTypes = {
                name: PropTypes.string.isRequired,//name必需，且为字符串
                age: PropTypes.number,
                sex: PropTypes.string,
                speak: PropTypes.func,//speak是一个函数，这里要主要函数为func，不能写function
            }
            //定义props的默认值
            static defaultProps = {
                sex: "男",//sex默认值为男
            }
            render() {
                // 解构
                const { name, age, sex } = this.props;
                // this.props.name = '123';//会报错，因为props是只读的
                //年龄加1
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age + 1}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        }
        function speak() {
            console.log('speak')
        }
        ReactDOM.render(<Person name="tom" age={2} speak={speak} />, document.getElementById('test'));
        ReactDOM.render(<Person name="jack" age={12} sex="女" />, document.getElementById('test1'));
        const p = { name: 'Dai', age: 20, sex: '男' };
        //...p批量传递标签属性
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'));
    </script>
</body>

</html>

四、构造器中的props

构造器是否接收props，是否转递给super，取决于：是否希望在构造器中通过this访问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>jsx使用react</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 引入prop-types，对组件标签的属性进行限制 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        class Person extends React.Component {

            constructor(props) {
                //构造器是否接收props，是否转递给super，取决于：是否希望在构造器中通过this访问props
                super(props);//使props附到实例上
                console.log(this.props);//可以获取到props
            }
            //static的作用是使它成为Person这个类的属性
            //定义props的类型、是否必须
            static propTypes = {
                name: PropTypes.string.isRequired,//name必需，且为字符串
                age: PropTypes.number,
                sex: PropTypes.string,
            }
            //定义props的默认值
            static defaultProps = {
                sex: "男",//sex默认值为男
            }
            render() {
                // 解构
                const { name, age, sex } = this.props;
                //年龄加1
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                        <li>性别：{sex}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Person name="tom" age={2} />, document.getElementById('test'));
    </script>
</body>

</html>

五、函数式组件如何使用props

以上说的都是类式组件，类式组件有三大核心属性-state,props,refs，而函数式组件只可以使用props（除非使用hooks）。

<!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>jsx使用react</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 引入prop-types，对组件标签的属性进行限制 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        //函数式组件只能使用三大核心属性中的props（除非使用hooks）
        function Person(props) {
            const { name, age, sex } = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                    <li>性别：{sex}</li>
                </ul>
            )
        }
        //定义props的类型、是否必须
        Person.propTypes = {
            name: PropTypes.string.isRequired,//name必需，且为字符串
            age: PropTypes.number,
            sex: PropTypes.string,
            speak: PropTypes.func,//speak是一个函数，这里要主要函数为func，不能写function
        }
        //定义props的默认值
        Person.defaultProps = {
            sex: "男",//sex默认值为男
        }
        ReactDOM.render(<Person name="tom" age={2} />, document.getElementById('test'));
    </script>
</body>

</html>

在这里插入图片描述

以上就是 React 组件实例对象的三大属性2-props，请大家关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。

@Dai
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react 展示对象_十分强大的特效组件：affecter-react
weixin_39726971的博客
12-20 507
目录一、简介二、Affecter 是什么？三、Affecter 能做什么？四、安装方式五、相关概念六、基本使用方式七、Affecter 的运行模式八、Affecter 的结构九、Affecter 类型表示规则十、给 Affecter 和 AffectedItem 设置样式十一、影响锚点项目锚点十二、影响样式十三、转换器数组转换流转换流的分支转换流的汇总距离坐标对象的其它数据共享数据转换器的生成器转...
ES6 class类链式继承，实例化及react super(props)原理详解
10-15
主要介绍了ES6 class类链式继承，实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承，实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下
第七章 react组件实例中三大属性之props
天界程序员的博客
03-27 305
React中的props是一种用于组件之间传递数据的机制。它是一个对象，包含了组件的属性和值。当一个组件被渲染时，它的props对象会被传递给它。这样，组件就可以使用这些属性来渲染自己。
react组件实例对象的三大核心（state,props,refs）
weixin_58632808的博客
04-21 540
组件实例对象的三大核心 一、state class Weather extends React.Component { constructor(props) { super(props); // 解决demo中this指向问题 this.test = this.this.demo.bind(this); } state = { isHort: true }; render() { const { isHort } = this.state; retu
【React 全家桶】React组件（类式）实例对象的三大属性3-Refs
Dai的博客
01-13 292
【React 全家桶】React组件（类式）实例对象的三大属性3-Refs
react项目所需的js文件：prop-types.js，react.development.js，react-dom.development.js，
M_SSY的博客
02-24 2408
https://unpkg.com/prop-types@15.6.2/prop-types.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js https://unpkg.com/babel-standalone@6.26.0/babel.min.js
浅谈React中的元素、组件、实例和节点
08-27
React 实例是指 React 组件的实例对象，它是 React 组件的运行时表示。React 实例拥有组件的生命周期方法和状态信息，它可以响应用户交互和状态变化。 节点 (Node) ------------- React 节点是指 React 元素在 DOM...
详解React中传入组件的props改变时更新组件的几种实现方法
10-18
在React开发过程中，当组件接收到新的`props`时，我们通常希望根据这些新属性来更新组件的状态（`state`），以便重新渲染组件以反映变化。本文将详细讲解React中处理`props`改变并更新组件的几种方法，以及如何优雅...
react-wasm:用于React的声明性WebAssembly实例
05-02
React堆 用于React的声明性WebAssembly实例安装您可以使用安装react-wasm： npm install --save react-wasm 如果您不在项目中使用npm，则可以使用dist文件夹中带有[removed]标记的UMD build来包含reactWasm。...
react-react面试题之提高组件的渲染效率.zip
最新发布
03-20
同时，考虑减少store中不必要的数据，只存储必要的状态，避免大对象的频繁更新。 5. **React Context API**：虽然Context API能解决props的层层传递问题，但如果滥用，可能会导致不必要的渲染。合理地使用Context并...
前端开源库-react-prop-types
08-30
前端开源库-react-prop-typesReact Prop类型，用于React的其他PropType
prop-types.js(15.6.1)
09-06
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
prop-types.js
03-10
prop-types.js
React 组件的3大属性: props
嗯...
10-31 655
</div>// 子组件render() {// 子组件通过 this.props.message 访问父组件传递的数据return (<div>
React--》React组件的三大核心属性
ztK63LrD的博客
01-15 775
state是组件对象最重要的属性，值是对象(可以包含多个 key-value的组合)；2）组件自定义的方法中this为undefined，强制绑定this可以通过函数对象的bind()或箭头函数。构造器是否接受props，是否传递给super，取决于：是否希望在构造器中通过this访问props。每个组件对象都会有 props 属性，组件标签的所有属性都保存在 props 中。拿到当前ref所在的节点，react帮助我们调用函数然后传进来，之后挂载到实例自身上。组件内的标签可以定义ref属性来标识自己。
React中props的使用
Kodomo
03-25 179
一、props的基础使用 二、对传输的数据进行限制(propTypes)
react 组件中的 props
weixin_44682587的博客
11-26 975
组件的props 组件是封闭的，要接收外部数据应该通过 props 来实现 props 的作用：接收传递给组件的数据 传递数据：给组件标签添加属性 接收数据︰函数组件通过 参数props 接收数据，类组件通过 this.props 接收数据 函数组件传值方式 // props const Hello = (props) => { // props 是一个对象 const { name, age } = props return( <div>
【react】利用prop-types第三方库对组件的props中的变量进行类型检测
weixin_30387799的博客
10-10 147
1.安装：npm install prop-types --save 2.使用 import React, { Component } from 'react'; import PropTypes from 'prop-types' const users = [ 1, { username: 'Tongbao', age: 22, gender: ...
React函数组件和类组件的区别
m0_48205289的博客
08-25 2296
定义组件名的要求： 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件 function Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getElementById('root')); ...
react 三大属性
07-28
回答: React中的三大属性是props、state和refs。\[1\] props是组件的属性，可以通过this.props来访问。它可以用来传递数据给组件，并且可以对属性值进行类型限制和必要性限制。可以使用PropTypes来进行属性类型的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值