好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表
在state定义数据
进行数据渲染
//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
class HelloWorld extends React.Component {
//初始化状态
state={
comments:[{
id:1,name:"geyao",content:"哈哈"
},{
id:2,name:"fangfang",content:"哈哈"
},{
id:3,name:"geyao",content:"哈哈"
}]
}
render() {
return (
<div className="app">
<div>
<input
className="user"
type="text"
placeholder="请输入评论人"
/>
<br />
<textarea
className="content"
cols="30"
rows="10"
placeholder="请输入评论列表"
></textarea>
<br />
<button>发表评论</button>
</div>
<div className="no-comment">暂无评论,快去评论吧~</div>
<ul>
{/* <li>
<h3>评论人:jack</h3>
<h3>评论内容:沙发</h3>
</li> */}
{this.state.comments.map(item=>(
<li key={item.key}>
<h3>评论人:{item.name}</h3>
<p>评论内容:{item.content}</p>
</li>
)
)}
</ul>
</div>
)
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
运行结果
好客租房41-react组件基础综合案例-渲染列表数据的更多相关文章
- 好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...
- React.js 小书 Lesson13 - 渲染列表数据
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...
- 好客租房40-react组件基础综合案例-案例需求分析
实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...
- 好客租房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:类组件必须以大写字母开头 ...
- Vue和Element基础使用,综合案例学生列表实现
知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- react第十九单元(react+react-router-dom+redux综合案例1)
第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...
随机推荐
- 1、Jetson Nano 远程桌面XP问题
jeston nano上网 方法3(最简单的方法) 最简单的方法真的特简单,用USB数据线连接主板的USB接口以及手机,打开手机的USB共享即可,若要使用静态IP,可在主板上修改配置文件,接口一般为u ...
- pandas学习总结
什么是pandas pandas数据读取 03. Pandas数据结构 Pandas查询数据的几种方法
- 语言算子&模糊推理
一.语言算子 语言算子分为三类: ①语气算子 ②模糊化算子 ③判定化算子 (1)语气算子 "集中化算子":--"很"."极"."非 ...
- 放大器(PA+LAN)在射频上的应用
转自 动手又动脑才会有创造 放大器,包括两种,PA与LAN,功率放大器(PA) 和低噪声放大器(LNA),在射频上,PA用于信号的输出放大,而LNA用天线端的输入放大,一般的,LAN会比PA的放大倍数 ...
- 基于HTML5的网络拓扑图(1)
什么是网络拓扑 网络拓扑,指构成网络的成员间特定的排列方式.分为物理的,即真实的.或者逻辑的,即虚拟的两种.如果两个网络的连接结构相同,我们就説它们的网络拓扑相同,尽管它们各自内部的物理接线.节点间距 ...
- 如何实现多个接口Implementing Multiple Interface
4.实现多个接口Implementing Multiple Interface 接口的优势:马克-to-win:类可以实现多个接口.与之相反,类只能继承一个超类(抽象类或其他类). A class c ...
- 多态,动态方法调度(dynamic method dispatch)?
8.多态Polymorphism,向上转型Upcasting,动态方法调度(dynamic method dispatch) 什么叫多态?简言之,马 克 - t o - w i n:就是父类引用指向子 ...
- 腾讯云服务nginx部署静态项目
一直想要搭建自己的blog,买了基础云服务器练手 文章内容是根据腾讯文档(https://cloud.tencent.com/document/product/213/2131)总结 部署静态页面归纳 ...
- win内核漏洞提权
WIN系统溢出漏洞提权 漏洞筛选 在整个提权项目中,前提是拿到webshell. 关于系统的溢出漏洞,我推荐两个项目: https://github.com/chroblert/WindowsVuln ...
- Python学习报告及后续学习计划
第一次有学习Python的想法是源于寒假在家的时候,高中同学问我是否学了Python(用于深度学习),当时就到b站收藏了黑马最新的教学视频,但是"收藏过等于我看了",后续就是过完年 ...