好客租房49-组件的props(特点)
特点
1可以给组件传递任意类型的数据
2props是只读的对象 只能读取属性的值 无法修改对象
3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数
中获取到props
//导入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" color={['red', 'blue']}
tags={<p>哈哈哈</p>} />,
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 {
constructor(props){
super(props)
//constructor中拿不到props
console.log(props)
}
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" color={['red', 'blue']}
tags={<p>哈哈哈</p>} />,
document.getElementById('root')
)
好客租房49-组件的props(特点)的更多相关文章
- 好客租房46-react组件进阶目标
1能够使用props接收数据 2能够使用父子组件之间的通讯 3能够实现兄弟组件之间的通讯 4能够给组件添加props校验 5能够说出生命周期常用的钩子函数 6能够知道高阶组件的作用 组件通讯介绍 组件 ...
- 好客租房48-组件的props(基本使用)
组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...
- 好客租房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' //导入组件 ...
随机推荐
- c语言中的字面量
在计算机科学中,字面量(literal)是用于表达源代码中一个固定值的表示法(notation). 几乎所有计算机编程语言都具有对基本值的字面量表示,诸如:整数.浮点数以及字符串: 而有很多也对布尔类 ...
- 【Android开发】通过 style 设置状态栏,导航栏等的颜色
<style name="test"> <!--状态栏颜色--> <item name="colorPrimaryDark"> ...
- Python pip下载慢的解决方法
国外的源下载速度实在是太慢了 可以使用国内的一些镜像网站安装 使用cmd命令 格式:pip install -i 网站 库 例如: 国内的一些镜像网站 清华大学:https://pypi.tuna.t ...
- 基于Apache组件,分析对象池原理
池塘里养:Object: 一.设计与原理 1.基础案例 首先看一个基于common-pool2对象池组件的应用案例,主要有工厂类.对象池.对象三个核心角色,以及池化对象的使用流程: import or ...
- Struts2-day2总结
一.结果页面配置 1.全局结果页面 2.局部结果页面 ****注:如果同时配置了全局页面和局部页面配置,那么最终将以局部为准 result标签当中的type属性 默认值:dispatcher做转发 r ...
- 小白文-Git-版本控制
推荐阅读 Git学习-图文并茂还有游戏玩! Git版本控制 注意:开始学习之前,确保自己的网络可以畅通的连接Github:https://github.com,这个是一个国外网站,连起来特别卡,至于用 ...
- Markdown基础语法规则
你好,世界.粗体,斜体,测试,弟弟,H2O 论文题目 一级标题 二级标题 三级标题 1 2 3 点击此链接打开网址 公式 \(y = \sin x\) \[ y = \frac{1}{x} \] dd ...
- Aop踩坑!记一次模板类调用注入属性为空的问题
问题起因 在做一个需求的时候,发现原来的代码逻辑都是基于模板+泛型的设计模式,模板用于规整逻辑处理流程,泛型用来转换参数和选取实现类.听上去是不是很nice! 类目录结构 AbstractTestAo ...
- Ranchar中PostgreSQL容器异常 53100: could not resize shared memory segment ... bytes: No space left on device
问题: 客户查报表时描述查询一天的报表能出来,查询一个月的报表不能出来 分析原因: 从下图的异常中分析是PostgreSQL 的共享内存过小,容器默认的/dev/shm大小为64M 解决方案:调整ra ...
- IDEA SpringBoot-Mybatis-plus 实现增删改查(CRUD)
上一篇: IDEA SpringBoot-Mybatis实现增删改查(CRUD) 下一篇:Intellij IDEA 高效使用教程 (插件,实用技巧) 最好用的idea插件大全 一.前言 Mybati ...