好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论
1判断列表数据的长度是否为0
2如果为0 则渲染暂无评论
//导入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:"哈哈"
// }]
comments:[]
}
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>
{this.state.comments.length===0?(
<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'))
运行结果
好客租房42-react组件基础综合案例-渲染列表无数据并优化的更多相关文章
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
- 好客租房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 #授课思路 #案例和 ...
- Ext.js入门:常用组件与综合案例(七)
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
随机推荐
- C++ | 虚拟地址空间
在 x86 32位系统下,进程的虚拟地址空间为 232 (4G)大小,其中在windows系统下4G地址空间中0x00000000-0x7FFFFFFF 是用户地址空间,0x80000000-0xFF ...
- 5V转10.5V原理图
- 一次关于关系抽取(RE)综述调研的交流心得
本文来自于一次交流的的记录,{}内的为个人体会. 基本概念 实事知识:实体-关系-实体的三元组.比如, 知识图谱:大量实时知识组织在一起,可以构建成知识图谱. 关系抽取:由于文本中蕴含大量事实知识,需 ...
- 程序人生:织梦dedecms后台/会员验证码关闭
dedecms默认是所有的功能几乎只要用到验证码的地方我们都需要验证的,如果要关闭一些验证功能我们可以参考下面的教程,这里介绍了关闭后台,留言板,会员系统等验证码功能关闭了.提示:支持DedeCMS ...
- 为什么总有target=_blank?
源于Browsing Context 的概念,不仅有_blank,还有_parent, _top, _self等. 先留个坑.见示例.
- 《每周一点canvas动画》——3D点线与水波动画
<每周一点canvas动画>--差分函数的妙用 每周一点canvas动画代码文件 好像上次更新还是十一前,这唰唰唰的就过去大半个月了,现在才更新实在不好意思.这次我们不涉及canvas 3 ...
- Python:爬取全国各省疫情数据并在地图显示
代码: import requests import pymysql import json from pyecharts import options as opts from pyecharts. ...
- JavaScript实现有农历和节气节假日的日历
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content ...
- 《头号玩家》AI电影调研报告(三)
[AR市场正在迅猛增长] 据<工业增强现实现状2017>报告中所述,AR不再只是值得期待的新兴技术.2018年,投资此类技术已成为很多组织机构的关键战略,尤其是对于涉及复杂的制造和运营流程 ...
- 走进JUC的世界
概念 同步锁:synchronized.Lock区别 1.synchronized是不需要进行手动解锁 2.synchronized可以锁方法.锁同步代码块 3.synchronized是Java自带 ...