React学习（四）组件属性之二props

已于 2024-01-25 14:40:23 修改
阅读量410 收藏 9
点赞数 9
文章标签： react.js 学习 javascript
于 2024-01-24 23:41:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52551375/article/details/135833006
版权

1.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>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 创建组件
        class Person extends React.Component{
            
            render(){
                const {name,sex,age}=this.props
                return(
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Person name = 'tom' sex='女' age = '18'/>,document.getElementById('test'))

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

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>Document</title>
</head>
<body>
    <script type="text/javascript">
        let arr1 = [1,3,5,7,9]
        let arr2 = [2,4,10,6,8]
        console.log(...arr1)//展开一个数组
        let arr3 = [...arr1, ...arr2]//连接数组
        console.log(...arr3)
        // 函数传参,在函数中使用
        function sum(...numbers) {
            return numbers.reduce((preValue,curValue)=>{
                return preValue + curValue
            }) 
        }
        console.log(sum(1,2,4))
        // 构造字面量时使用展开语法
        let person = {name:'tom', age:18}
        let person2 = {...person}//复制一个对象
        // console.log(...person)//报错，展开运算符不能展开对象
        person.name = 'jerry'
        console.log(person.name)
        console.log(person2.name)
        // 复制对象的同时修改了属性,合并
        let person3 = {...person,name:'jack'}
        console.log(person3)
    </script>
</body>
</html>

3.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>Document</title>
</head>
<body>
    <div id= 'test'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        // 创建组件
        class Person extends React.Component{
            
            render(){
                const {name,sex,age}=this.props
                return(
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }
        // 渲染组件到页面
        // ReactDOM.render(<Person name = 'tom' sex='女' age = '18'/>,document.getElementById('test'))
        // 批量传数据
        const p ={name:'小芳', age:'18', sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test'))//这里...p不是原生js中对象的复制，因为babel+react使得...运算符可以展开一个对象，但仅限于标签属性的传递

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

4.对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>Document</title>
</head>
<body>
    <div id= 'test1'></div>
    <div id= 'test2'></div>
    <div id= 'test3'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        class Person extends React.Component{
            
            render(){
                const {name,sex,age}=this.props
                // props是只读的
                // this.props.name = 'jack'//此行代码会报错，因为props是只读的
                return(
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age+1}</li>
                    </ul>
                )
            }
        }
        Person.propTypes ={
            // 对于（标签属性）名字,性别，年龄进行类型、必要性的限制
            name:PropTypes.string.isRequired,//限制name为必传，且为字符串
            sex:PropTypes.string,//限制sex为字符串
            age:PropTypes.number,//限制age且为数值
            speak:PropTypes.func,//限制speak为函数，注意用【func】而不是【function】
        }   
        // 指定默认标签属性值
        Person.defaultProps = {
            sex:'男',//性别默认值为男
            age:18,//年龄默认值为18
        }
        // 渲染组件到页面
        ReactDOM.render(<Person name = 'tom' sex='女' age = {18} speak = {speak} />,document.getElementById('test1'))
        ReactDOM.render(<Person name = 'jerry' sex='女' age = {19}/>,document.getElementById('test2'))
        // 批量传数据
        const p ={name:'小芳', age:18, sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))//这里...p不是原生js中对象的复制，因为babel+react使得...运算符可以展开一个对象，但仅限于标签属性的传递
        function speak(){

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

5.简写props
使用static将对属性的限制写入class中，写为类自身的属性

<!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>Document</title>
</head>
<body>
    <div id= 'test1'></div>
    <div id= 'test2'></div>
    <div id= 'test3'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        class Person extends React.Component{
            // 对于（标签属性）名字,性别，年龄进行类型、必要性的限制
            static propTypes ={
                name:PropTypes.string.isRequired,//限制name为必传，且为字符串
                sex:PropTypes.string,//限制sex为字符串
                age:PropTypes.number,//限制age且为数值
                speak:PropTypes.func,//限制speak为函数，注意用【func】而不是【function】
            }   
            // 指定默认标签属性值
            static defaultProps = {
                sex:'男',//性别默认值为男
                age:18,//年龄默认值为18
            }
                render(){
                    const {name,sex,age}=this.props
                    // props是只读的
                    // this.props.name = 'jack'//此行代码会报错，因为props是只读的
                    return(
                        <ul>
                            <li>姓名：{name}</li>
                            <li>性别：{sex}</li>
                            <li>年龄：{age+1}</li>
                        </ul>
                    )
                }


        }
        // 渲染组件到页面
        ReactDOM.render(<Person name = 'tom' sex='女' age = {18} speak = {speak} />,document.getElementById('test1'))
        ReactDOM.render(<Person name = 'jerry' sex='女' age = {19}/>,document.getElementById('test2'))
        // 批量传数据
        const p ={name:'小芳', age:18, sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))//这里...p不是原生js中对象的复制，因为babel+react使得...运算符可以展开一个对象，但仅限于标签属性的传递
        function speak(){

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

6.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>Document</title>
</head>
<body>
    <div id= 'test1'></div>
    <div id= 'test2'></div>
    <div id= 'test3'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        class Person extends React.Component{
            // 构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
            constructor(props)
            {
                super(props)
                console.log('constructor', this.props)
            }
            // 对于（标签属性）名字,性别，年龄进行类型、必要性的限制
            static propTypes ={
                name:PropTypes.string.isRequired,//限制name为必传，且为字符串
                sex:PropTypes.string,//限制sex为字符串
                age:PropTypes.number,//限制age且为数值
                speak:PropTypes.func,//限制speak为函数，注意用【func】而不是【function】
            }   
            // 指定默认标签属性值
            static defaultProps = {
                sex:'男',//性别默认值为男
                age:18,//年龄默认值为18
            }
                render(){
                    const {name,sex,age}=this.props
                    // props是只读的
                    // this.props.name = 'jack'//此行代码会报错，因为props是只读的
                    return(
                        <ul>
                            <li>姓名：{name}</li>
                            <li>性别：{sex}</li>
                            <li>年龄：{age+1}</li>
                        </ul>
                    )
                }


        }
        // 渲染组件到页面
        ReactDOM.render(<Person name = 'tom' sex='女' age = {18} speak = {speak} />,document.getElementById('test1'))
        ReactDOM.render(<Person name = 'jerry' sex='女' age = {19}/>,document.getElementById('test2'))
        // 批量传数据
        const p ={name:'小芳', age:18, sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))//这里...p不是原生js中对象的复制，因为babel+react使得...运算符可以展开一个对象，但仅限于标签属性的传递
        function speak(){

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

7.函数式组件使用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>Document</title>
</head>
<body>
    <div id= 'test1'></div>
    <div id= 'test2'></div>
    <div id= 'test3'></div>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- 引入prop-types，用于对标签属性进行限制 -->
    <!-- <script type="text/javascript" src="..js/prop-types.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        // class Person extends React.Component{

        //     // 构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
        //     constructor(props)
        //     {
        //         super(props)
        //         console.log('constructor', this.props)
        //     }
        //     // 对于（标签属性）名字,性别，年龄进行类型、必要性的限制
        //     static propTypes ={
        //         name:PropTypes.string.isRequired,//限制name为必传，且为字符串
        //         sex:PropTypes.string,//限制sex为字符串
        //         age:PropTypes.number,//限制age且为数值
        //         speak:PropTypes.func,//限制speak为函数，注意用【func】而不是【function】
        //     }   
        //     // 指定默认标签属性值
        //     static defaultProps = {
        //         sex:'男',//性别默认值为男
        //         age:18,//年龄默认值为18
        //     }
        //         render(){
        //             const {name,sex,age}=this.props
        //             // props是只读的
        //             // this.props.name = 'jack'//此行代码会报错，因为props是只读的
        //             return(
        //                 <ul>
        //                     <li>姓名：{name}</li>
        //                     <li>性别：{sex}</li>
        //                     <li>年龄：{age+1}</li>
        //                 </ul>
        //             )
        //         }


        // }
        function Person(props) {
            const {name, age, sex} = props
            return(
                        <ul>
                            <li>姓名：{name}</li>
                            <li>性别：{sex}</li>
                            <li>年龄：{age+1}</li>
                        </ul>
                    )
            }
            Person.propTypes ={
                name:PropTypes.string.isRequired,//限制name为必传，且为字符串
                sex:PropTypes.string,//限制sex为字符串
                age:PropTypes.number,//限制age且为数值
                speak:PropTypes.func,//限制speak为函数，注意用【func】而不是【function】
            }   
        // 渲染组件到页面
        ReactDOM.render(<Person name = 'tom' sex='女' age = {18} speak = {speak} />,document.getElementById('test1'))
        ReactDOM.render(<Person name = 'jerry' sex='女' age = {19}/>,document.getElementById('test2'))
        // 批量传数据
        const p ={name:'小芳', age:18, sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))//这里...p不是原生js中对象的复制，因为babel+react使得...运算符可以展开一个对象，但仅限于标签属性的传递
        function speak(){

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

8.总结
（1）每个组件对象都会有props（properties）属性
（2）组件标签的属性都保存在props中
（3）通过标签属性从组件外部向组件内部传递变化的数据
（4）组件内部不要修改props数据
（5）编码操作在这里插入图片描述
在这里插入图片描述

qq_52551375
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react高阶组件添加和删除props
01-19
唠叨几句啦 在看程墨老师的深入浅出高阶组件，开头一点提了一个需要，创建两个高阶组件，一个能给传入的元素自定义添加props...我们需要传入任何组件和参数，都把user参数给删除了，所以返回值是一个接收props属性的函
react prop-types的使用讲解
热门推荐
sjpeter的专栏
07-17 5万+
1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说，JS是自由的，但同时又有许多让人烦恼的地方.javascript 很多时候就是这么一个熊孩子，他很多时候并不会像Ç和java的这些“好孩子”那样循规蹈矩。因此给我们带来许多烦恼   &lt;1&gt;运行时候控制台报错：未记错误，尤其这令人恼火的的英文系统-告诉我们有错误但是又不告诉我们错误发生在哪里试想一下，你...
React中props及（父子，子父，兄弟）组件之间的传值及prop-types
weixin_45868552的博客
04-15 903
一、关于props 1、props是用来干啥的：因为组件内部是封闭的，要接收外部数据应该通过props来实现，所以props是用来接收传递给组件的数据。 2、函数组件通过参数props接收数据，类组件通过this.props接收数据。 3、props的特点： （1）可以给组件传递任意类型的数据。 （2）props是只读属性，只能读取属性的值，无法修改对象 （3）使用类组件，如果写了构造函数，应该将props传递给super()，否则无法在构造函数中获取到props Class App extends Rea
PropTypes 在 React 中的使用心得
天问博客-专注于大前端技术
12-21 1869
在 React 开发中，PropTypes 是一个非常有用的库，用于对组件的属性进行类型检查。它可以帮助我们在开发过程中捕获潜在的错误，提高代码的可靠性和可维护性。本文将介绍 PropTypes 的基本用法和一些使用心得。
react 之 prop-types
catchmypow的博客
10-04 3962
react 之 prop-types 在开发过程当中，经常会用到Prop的type校验，但是React.PropTypes和React.createClass这两个功能在React 15.5之后版本被废弃了，所以从15.5版本开始，须要引入prop-types包来使用props校验。 使用步骤 安装prop-types第三方包 yarn add prop-types //yarn npm install prop-types //npm 导入 import PropTypes form 'pr
React之propsTypes进行类型的检查
startyangu的博客
06-20 3561
React中propsTypes的主要作用就是用于对传入参数的属性的检查。如import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt; );...
详解React中传入组件的props改变时更新组件的几种实现方法
10-18
在React开发过程中，当组件接收到新的`props`时，我们通常希望根据这些新属性来更新组件的状态（`state`），以便重新渲染组件以反映变化。本文将详细讲解React中处理`props`改变并更新组件的几种方法，以及如何优雅...
React中组件的props.children
01-20
在React中，`props.children` 是一个特殊属性，它允许父组件向子组件传递内容。这一特性使得组件之间能够灵活地交互，实现可复用的、动态的数据展示。以下是对`props.children`深入理解的详细解释： ### 1. 父组件...
React学习笔记之高阶组件应用
08-27
HOCs本质上是纯函数，它们接收一个React组件作为输入，并返回一个新的组件。这种设计模式使得HOCs成为解决React应用中组件复用和抽象的强大工具。 ### 什么是高阶组件？ 高阶组件是一个接受组件并返回新组件的函数...
React props和state属性的具体使用方法
08-27
React props 和 state 属性是 React 组件的核心组成部分，它们的正确使用可以帮助我们构建更加灵活和强大的 React 应用程序。通过本篇文章，我们已经了解了 props 和 state 的使用方法，并掌握了如何使用它们来构建 ...
13 React props的使用
凯扣叮博客
12-20 505
在经过对state的学习后，可以理解state为组件内部数据的处理，也就是说是一些静态数据的处理。 但在我们实际的业务场景中，一般都是服务端返回的数据，渲染这些数据该怎么办呢？ props可以来解决这个问题。这也是React设计props的初衷。
React类型检测prop-types的基本使用
qq_60976312的博客
08-26 768
React类型检测prop-types的基本使用
【06】react 之 PropsType
banpian5203的博客
08-12 357
React组件创建的时候，需要传入属性，我们可以使用使用PropTypes进行类型检查，您可以使用React.PropTypes在组件的道具上运行。 React.PropTypes.array React.PropTypes.bool React.PropTypes.func React.PropTypes.number React.PropTypes.o...
React从入门到精通系列之(13)使用PropTypes进行类型检测
weixin_33858485的博客
12-15 174
十三、使用PropTypes进行类型检测 随着你的应用的变得越来越大，你可以通过typechecking来找到更多的bug。 对于某些应用，您可以使用JavaScript扩展（如Flow或TypeScript）对整个应用程序进行类型检查。 即使你不使用这些，React也有一些内置的typechecking能力。 要在组件的props上运...
浅谈React的类型检测——PropTypes
筱葭的博客
04-27 1万+
随着应用的日益变大，保证组件的正确使用显得日益重要，为此引入React.propTypes：React.PropTypes 提供很多验证器来验证传入数据的有效性，当向props传入无效数据时，JavaScript 控制台会抛出警告。 注意为了性能考虑，只在开发环境验证 propTypes。 1、声明props为指定的JS基本类型，可传可不传。 1) React.PropTypes.array
使用propTypes进行类型检查
txl910514的专栏
10-26 5704
博客园首页新随笔联系管理订阅 随笔- 58  文章- 0  评论- 1  React文档（十五）使用propTypes进行类型检查 随着你的应用的开发，你会使用类型检查的方法来捕获很多bug。对于一些应用，你可以使用js扩展就像Flow或者TypeScript去对整个应用进行类型检查。但是即使你不是用这些扩展语言，React也有一些内置
React中静态类型校验-PropTypes学习
suwu150
03-06 1万+
PropTypes学习 官方网址详细说明 1.基本说明 PropTypes定义为组件类自身的属性，用以定义prop的类型。在开发模式下，当提供一个不合法的值作为prop时，控制台会出现警告；在产品模式下，为了性能考虑应忽略propTypes Prop types 是一个在运行时使用的新特性. 我们能够通过下面的方式在我们的团队里边使用. 2.版本更新 在15.5版本之后, 代替...
react 中 props 属性的验证
北芒的博客
07-14 587
使用之前的准备 ---------- 官方网站 引入 prop-types import PropTypes from 'prop-types'; 设置属性验证（书写方法） 格式： // 方法一 组件名.propTypes = { name: PropTypes.string }; //方法二 static propsTypes = { num:propsTypes.number } 代码展示： // 方法一 import PropTypes from 'prop-types';.
React+TS前台项目实战（二十九）-- 首页构建之性能优化实现首页Echarts模块数据渲染
最新发布
weixin_43883615的博客
07-11 1065
还记得之前我们创建的 高性能可配置Echarts组件 吗？今天我们将利用它来呈现首页统计模块的数据可视化效果，借助这个组件，我们能够显著减少编写代码的工作量，会方便很多。下一篇讲【首页响应式构建之实现全页面数据】。关注本栏目，将实时更新。
react传递组件props
07-28
回答: 在React中，可以通过给组件标签添加属性来传递props数据。函数组件通过参数props接收数据，类组件通过this.props接收数据。props的属性是只读属性，无法修改。当组件有子节点时，props中会有一个children属性，表示组件标签的子节点。children属性的值可以是任意值，包括文本、React元素和组件。例如，可以通过以下方式传递props给组件：\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [React 组件进阶props、组件通讯、跨级通信Context、props属性children、props校验、组件生命周期、render-...](https://blog.csdn.net/qq_43472877/article/details/127732713)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值