组件的三大核心属性之props

最新推荐文章于 2023-06-08 12:56:21 发布
最新推荐文章于 2023-06-08 12:56:21 发布
阅读量244 收藏
点赞数
分类专栏： react 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lilico_/article/details/122102702
版权

限制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>helloReact</title>
</head>
<body>
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <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>
    <script type="text/babel">
        class Person extends React.Component{
            render () {
                const {name, sex, age, speck}  = this.props
                return (
	                	<div>
	                    <ul>
	                        <li>姓名: {name}</li>
	                        <li>性别: {sex+"性"}</li>
	                        <li>年龄: {age}</li>
	                    </ul>
	                </div>
                )
            }
        }
        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            speck: PropTypes.func
        }
        Person.defaultProps = {
            sex: '女',
            age: 30
        }
        function speck () {
            console.log('ok')
        }
        ReactDOM.render(<Person name="张三" sex="男"/>, document.getElementById('test'))
        ReactDOM.render(<Person name="李四" age={19} />, document.getElementById('test1'))
        ReactDOM.render(<Person name="王五" age={20} sex="男" speck={speck}/>, document.getElementById('test2'))

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

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>helloReact</title>
</head>
<body>
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <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>
    <script type="text/babel">
        class Person extends React.Component{
            static propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            speck: PropTypes.func
            }
            static defaultProps = {
                sex: '女',
                age: 30
            }
            render () {
                const {name, sex, age, speck}  = this.props
                return (
	                	<div>
	                    <ul>
	                        <li>姓名: {name}</li>
	                        <li>性别: {sex+"性"}</li>
	                        <li>年龄: {age}</li>
	                    </ul>
	                </div>
                )
            }
        }
        function speck () {
            console.log('ok')
        }
        ReactDOM.render(<Person name="张三" sex="男"/>, document.getElementById('test'))
        ReactDOM.render(<Person name="李四" age={19} />, document.getElementById('test1'))
        ReactDOM.render(<Person name="王五" age={20} sex="男" speck={speck}/>, document.getElementById('test2'))

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

函数式组件使用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>helloReact</title>
</head>
<body>
    <div id="test"></div>
    <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>
    <script type="text/babel">
        function Person (props) {
            const {name, sex, age, speck}  = props
            return (
	            	<div>
	                <ul>
	                    <li>姓名: {name}</li>
	                    <li>性别: {sex+"性"}</li>
	                    <li>年龄: {age}</li>
	                </ul>
	            </div>
            )
        }

        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            speck: PropTypes.func
        }
        Person.defaultProps = {
            sex: '女',
            age: 30
        }
        function speck () {
            console.log('ok')
        }
        ReactDOM.render(<Person name="张三"/>, document.getElementById('test'))
        /*
            1、react解析组件标签，找到MyComponent组件
            2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实DOM，随后呈现在页面中
        */
    </script>
</body>
</html>
Lilico_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【React】2、面向组件编程——组件实例的三大核心属性state、props和refs超详解
Coding and studying
05-24 1291
React面向组件编程 文章目录React面向组件编程一、使用 React 开发者工具调试二、基本理解和使用2.1 函数式组件（适用于简单组件<无状态组件>的定义）2.2 类式组件（适用于复杂组件<有状态组件>的定义）三、组件实例的三大核心属性1、状态（state）理解强烈注意示例效果state 标准写法state 简写2、props理解作用编码操作示例效果在类式组件中使用props在类式组件中使用props-简写在函数式组件中使用props3、refs理解示例效果字符串形式的ref
React：组件实例三大属性之(props)
Continue的博客
06-27 425
????个人理解，如有不对，欢迎讨论 文章目录概述基本使用传入类型限制默认值写入类组件内部函数组件使用props 概述 react组件实例中共有三大属性，分别为state、props、refs。其中props，是properties的简写，字面意思为“属性”，在组件上绑定的属性都在props里。 作用： 通过标签属性从组件外向组件内传递变化的数据 注意： props属性是只读的，也就是不能修改，只能读取 基本使用 <!-- 创建容器标签 --> <div id="root
【React】组件的三大属性之props
zqq_2016的博客
10-15 296
props的理解： ① 每个组件对象都会有props（properties的简写）属性； ② 组件标签的所有属性都保存在props中。 props的作用： ① 通过标签属性从组件外向组件内传递变化的数据； 注意点：组件内部不要修改props数据。 一、 注意工厂函数模式创建组件和类模式创建组件时props使用的区别？ 1. 工厂函数模式创建组件时props的使用： Fun.js import React from 'react'; // 1. 创建组件 function Fun(p.
组件实例的三大属性state,props,refs
weixin_52139094的博客
07-27 472
组件实例的三大属性 state      我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI,这样就让用户的数据和界面保持一致了。state是组件的私有属性。 在React中，更新组件的state，结果就会重新渲染用户界面(不需要操作DOM),一句话就是说，用户的界面会随着状态的改变而改变。 state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合） 案例： 1.
react三大重要属性 — state、props、refs
halo1416的博客
04-19 570
前提：请注意查看实例代码中的注释哦 一、属性之state 实例： <script type="text/babel"> /* 需求: 自定义组件, 功能说明如下 1. 显示h2标题, 初始文本为: AAAA 2. 点击标题更新为: BBBB */ class Like extends React.Component { constr...
React -- 组件的三大属性（state、props、refs）
Sco_jing的博客
10-11 616
欢迎学习交流！！！ 持续更新中… 文章目录组件（实例）的三大属性state 属性props 属性refs 属性组件的生命周期 组件（实例）的三大属性 state 属性 state：状态，有状态为复杂组件，无状态为简单组件 理解： state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 注意： 组件中render方法中的this为组件实例对象 组件自定义的方法中this为undefine.
组件的属性props
weixin_30681615的博客
08-25 91
组件的属性props 是不能自己改的，一般是从外面传进来。在组件的视图中用，this.props.XXX 表示该组件的XXX 属性 转载于:https://www.cnblogs.com/liuw-flexi/p/11408615.html...
React中组件的三大属性（state, props, ref)
szwh1998的博客
10-26 355
state 理解：state是组件对象最重要的属性，值是一个对象，包含多个key value组合，也就是说可以包含多个状态。组件也被称为状态机，通过更新组件的state来更新对应的页面显示。 注意： 组件中render方法内的this指向该组件实例对象 组件自定义的方法需要通过箭头函数来指向该组件实例对象 状态数据不能直接以赋值的形式修改或者更新，必须通过setState来修改状态，参数是一个state对象。 props 理解： 每个组件对象都会有props属性 组件标签的所有属性都会保存在
vue组件三大核心概念图文详解
10-16
本文详细介绍了Vue组件开发中的三大核心概念：属性(props)、事件(event)和插槽(slot)。这些概念是Vue框架中组件化开发的基础，理解并熟练掌握它们对于编写高效的Vue代码至关重要。 首先，我们来看属性（props）。在...
vue的props实现子组件随父组件一起变化
09-01
在Vue.js框架中，组件是构建复杂应用的核心。它们允许我们将UI拆分为可重用的、独立的部分。在组件之间传递数据是常见的需求，而`props`就是Vue中用于从父组件向子组件传递数据的主要机制。本篇将详细介绍如何通过`...
组件三大属性，state,props,refs
h360583690的博客
02-21 725
一，组件实例三大属性 （1）state 查看状态：在写好的组件实例上有一个属性，state，就代表这个组件的状态。 接下来我们写一个有状态的组件： <body> <div id="test"></div> <script type="text/babel"> // 创建组件 class Component extends React.Component { // 初始化,调
React三大属性（props，state，refs）
星河梦~的博客
12-05 839
目录React三大属性Propsstaterefs 有关React基础知识及组件相关知识，请移步React框架简介（JSX语法、组件、虚拟DOM渲染） React三大属性 Props 既然React组件可以通过JavaScript函数方式实现， 那么React组件就可以接受参数的传入。React框架定义了一个Props的概念， 专门用来实现React函数组件接受参数的输入。 1、每个组件都有props属性； 2、组件的属性值都保存在props中； 3、通过props可以在组件外部向组件内部传递参数； 4、在
【React】归纳篇（四）组件的三大属性之 state | props | refs 属性
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
09-05 745
再次来回顾下 : 组件化编码两步走： 1、定义组件（两种方式） 2、渲染组件标签 组件的三大属性之 state 属性（最重要的属性） state基础（最重要的属性） state是组件对象最重要的属性，其值是对象，即可以包含多个数据 可以通过更新组件的state来更新对应的页面的显示（重新进行组件渲染） state 操作 初始化状态 constructor(props){...
2020/02/16 03-组件属性props
qq_42227818的博客
02-17 338
每个react组件你内部都维护了一个state，state要定义必须是一个对象类型，就是{}大括号里面是kv对，这就是js里的定义，如果state发生变化，就会影响组件本身，自己就会调用render函数。 只要知道state变化，render函数调用，变化调用render函数，就会按照你的要求绘制，这个绘制并没有在网页中绘制，只是在虚拟dom中吧需要修改的修改，在虚拟dom和dom之间比较，在需要...
React Native中组件的props和state
weixin_33716154的博客
02-13 204
一、组件的属性(props)和状态(state) 　　1.属性（props） 　　它是组件的不可变属性（组件自己不可以自己修改props）。 　　组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为节点的属性。 　　一般组件很少需要对外公开方法（例外：工具类的静态方法等），唯一的交互途径就是props。所以说它也是父组件与子组件通信的桥梁。 　　...
html下拉框设置默认值_props验证与设置默认值
weixin_34847426的博客
12-10 381
1无状态组件props验证与设置默认值无状态组件props设置默认值当我们没有给props设置要传的默认值时，不会报错，只是会出现一片空白，影响用户体验，如下例里，只是在接收的时候直接用的props接收，但在调用组件时并没有传初始值过去，所以页面上呈现一片空白。无状态组件设置默认值，也就是要传的初始值，需要使用defaultProps属性，具体的设置方法就是当前组件名.defaultPr...
组件实例三大属性之props
qq_38721353的博客
01-14 114
1、作用：给组件传递参数 2、存储形式：{key:value} props的基本使用例子1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&gt
关于Vue中props的详解
热门推荐
jingtian678的博客
07-23 13万+
看一下官方文档： 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。 也就是props是子组件访问父组件数据的唯一接口。 详细一点解释就是： 一个组件可以直接在模板里面渲染data里面的数据（双大括号）。 子组件不能直接在模板里面渲染父元素的数据。 如果子组件想要引用父元素的数据，那么就在...
认识vue中的Props
最新发布
九仞山的专栏
06-08 1万+
详细介绍了Vue中的Props
Vue父子组件通信实例：props、$ref与$emit详解
本文将深入探讨如何利用props、$ref和$emit这三个核心概念实现这一目标。首先，让我们了解组件的基本概念：Vue组件是可复用的代码模块，它们各自拥有独立的作用域，这意味着组件之间不能直接共享数据。 1. **Props...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值