渲染列表评论

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组件基础综合案例-渲染列表无数据并优化的更多相关文章

  1. 好客租房41-react组件基础综合案例-渲染列表数据

    1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...

  2. 好客租房40-react组件基础综合案例-案例需求分析

    实现 案例的数据 渲染评论列表 有评论 没有评论 暂无评论 获取评论信息 包括评论人和受控组件 发表评论 更新评论 //导入react import React from 'react' import ...

  3. 好客租房43-react组件基础综合案例-4获取评论信息

    获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...

  4. 好客租房44-react组件基础综合案例-5发表评论-1

    发表评论 1给按钮绑定点击事件 2在事件处理程序中 通过state获取评论信息 3将评论信息添加到state中 并调用setState()方法更新数据 //导入react import React f ...

  5. 好客租房45-react组件基础综合案例-6边界问题

    边界问题 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // 约定1:类组件必须以大写字母开头 ...

  6. Vue和Element基础使用,综合案例学生列表实现

    知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...

  7. react第二十单元(react+react-router-dom+redux综合案例2)

    第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业

  8. react第十九单元(react+react-router-dom+redux综合案例1)

    第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和 ...

  9. Ext.js入门:常用组件与综合案例(七)

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

随机推荐

  1. C++ | 虚拟地址空间

    在 x86 32位系统下,进程的虚拟地址空间为 232 (4G)大小,其中在windows系统下4G地址空间中0x00000000-0x7FFFFFFF 是用户地址空间,0x80000000-0xFF ...

  2. 5V转10.5V原理图

  3. 一次关于关系抽取(RE)综述调研的交流心得

    本文来自于一次交流的的记录,{}内的为个人体会. 基本概念 实事知识:实体-关系-实体的三元组.比如, 知识图谱:大量实时知识组织在一起,可以构建成知识图谱. 关系抽取:由于文本中蕴含大量事实知识,需 ...

  4. 程序人生:织梦dedecms后台/会员验证码关闭

    dedecms默认是所有的功能几乎只要用到验证码的地方我们都需要验证的,如果要关闭一些验证功能我们可以参考下面的教程,这里介绍了关闭后台,留言板,会员系统等验证码功能关闭了.提示:支持DedeCMS ...

  5. 为什么总有target=_blank?

    源于Browsing Context 的概念,不仅有_blank,还有_parent, _top, _self等. 先留个坑.见示例.

  6. 《每周一点canvas动画》——3D点线与水波动画

    <每周一点canvas动画>--差分函数的妙用 每周一点canvas动画代码文件 好像上次更新还是十一前,这唰唰唰的就过去大半个月了,现在才更新实在不好意思.这次我们不涉及canvas 3 ...

  7. Python:爬取全国各省疫情数据并在地图显示

    代码: import requests import pymysql import json from pyecharts import options as opts from pyecharts. ...

  8. JavaScript实现有农历和节气节假日的日历

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content ...

  9. 《头号玩家》AI电影调研报告(三)

    [AR市场正在迅猛增长] 据<工业增强现实现状2017>报告中所述,AR不再只是值得期待的新兴技术.2018年,投资此类技术已成为很多组织机构的关键战略,尤其是对于涉及复杂的制造和运营流程 ...

  10. 走进JUC的世界

    概念 同步锁:synchronized.Lock区别 1.synchronized是不需要进行手动解锁 2.synchronized可以锁方法.锁同步代码块 3.synchronized是Java自带 ...