好客租房48-组件的props(基本使用)
组件是封闭的 要接受外部数据应该通过props来实现
props的作用:接受传递给组件的数据
传递数据:给组件标签添加属性
接收数据:函数组件通过参数props接收数据 类组件通过this.props接受数据
函数组件
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
//函数组件
const HelloWorld=props=>{
console.log(props)
return (
<div>
<h1>props:{props.name}</h1>
</div>
)
}
ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))
类组件
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component{
render(){
console.log(this.props)
return (
<div>
<h1>props:{this.props.name}</h1>
</div>
)
}
}
//函数组件
// const HelloWorld = (props) => {
// console.log(props)
// return (
// <div>
// <h1>props:{props.name}</h1>
// </div>
// )
// }
ReactDOM.render(<HelloWorld name="geyao" />, document.getElementById('root'))
好客租房48-组件的props(基本使用)的更多相关文章
- 好客租房46-react组件进阶目标
1能够使用props接收数据 2能够使用父子组件之间的通讯 3能够实现兄弟组件之间的通讯 4能够给组件添加props校验 5能够说出生命周期常用的钩子函数 6能够知道高阶组件的作用 组件通讯介绍 组件 ...
- 好客租房49-组件的props(特点)
特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...
- 好客租房43-react组件基础综合案例-4获取评论信息
获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...
- 好客租房44-react组件基础综合案例-5发表评论-1
发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...
- 好客租房45-react组件基础综合案例-6边界问题
边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...
- 好客租房20-react组件介绍
1react组件介绍 组件是react中的一等公民 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点 可复用性 独立 可组合
- 好客租房39-react组件基础总结
1组件的两种创建方式:函数组件和类组件 2无状态函数组件 负责静态结构展示 3有状态组件 负责更新ui 让页面动起来 4绑定事件注意this指向问题 5使用受控组件创建表单 6完全利用js语言的能够力 ...
- 好客租房40-react组件基础综合案例-案例需求分析
实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
随机推荐
- vue H5 超简单的swiper制作抖音上拉切换视频播放
-----html部分------ <swiper vertical :style="{height: windowheight+'px',width:375+'px'}" ...
- 写了一个web os脚手架
预览地址在这里:http://thx.github.io/magix-os/项目地址在这里:https://github.com/thx/magix-os 介绍下目录结构 核心目录cores主要是构成 ...
- vue和mint-ui loadMore 实现上拉加载和下拉刷新
首先安装mint-ui组件库 npm install mint-ui 在main.js中引入mint-ui和样式 import 'mint-ui/lib/style.css' import MintU ...
- PAT B1051 复数乘法
输入样例: 2.3 3.5 5.2 0.4 输出样例: -8.68-8.23i 解题思路: 1.读入R1.P1.R2.P2. 2.A=(R1*R2)cos(P1+P2),B=(R1*R2)sin(P1 ...
- uniapp中websokcet封装和使用
1. websocket.js 封装代码 //是否已经连接上ws let isOpenSocket = false //心跳间隔,单位毫秒 let heartBeatDelay = 3000 l ...
- Javascript中数组的判断方法
摘要: 1.数组检测的方法: 1) typeof . 2) instanceof . 3) constructor . 4) Object.prototype.toString. 5) Array.i ...
- Linux_连接工具_SecureCRT的使用教程
什么是SecureCRT? SecureCRT是一款支持 SSH2.SSH1.Telnet.Telnet/SSH.Relogin.Serial.TAPI.RAW 等协议的终端仿真程序,最吸引我的是,S ...
- Visual Studio 安装 MFC
**Visual Studio 安装 MFC 库** 打开 Visual Studio Installer //程序 选择对应的版本 (本人 VS2022)->修改 [点击]单个组件 ...
- linux磁盘之回环设备
为什么要讲回环设备,下面看下系统的采样情况 上面图有loop0,loop1等设备标记,这些是什么?看看下面fdisk -l 的结果,乱糟糟的一堆? 什么是回环设备? 上面的loop0, loop1就是 ...
- 『现学现忘』Git基础 — 1、版本控制系统介绍
在具体了解Git之前,首先需要我们了解一下VCS,即版本控制系统(version control system) 1.什么是版本控制系统 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版 ...