好客租房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'))
运行结果
最新文章
- 【Git】自定义Git
- 【总结】IE和Firefox的Javascript兼容性总结(转)
- Clarkson不等式
- CentOS添加swap分区
- Apriori算法
- hdu1166(线段树)
- js getByClass函数封装
- CentOS 6.5安装PostgreSQL9.3.5时报错: jade: Command not found
- 原生Jdbc操作Mysql数据库开发步骤
- swift 编写欢迎界面-- ios开发
- JS Bootstrap-DateRangePicker 如何设置默认值为空
- 前后端同学,必会的Linux常用基础命令
- 【Linux】配置SSH Key到GitHub/GitLab
- Chapter 5 Blood Type——24
- Exp3 免杀原理与实践 20164303 景圣
- LeetCode - Unique Email Addresses
- MyBatis在Oracle中插入数据并返回主键的问题解决
- 使用MYSQL的INNODB实现任务分发机制
- 1 CRM需求分析,数据库表,录入数据
- [洛谷P4340][SHOI2016]随机序列