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

  1. 好客租房42-react组件基础综合案例-渲染列表无数据并优化

    渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...

  2. React.js 小书 Lesson13 - 渲染列表数据

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. cpu设计过程

    一款CPU是如何设计出来的? 前面一段,我们了解了芯片的制造过程,也就是如何从沙子中提取硅.把硅切成片,在片上通过离子注入实现PN结.实现各种二极管.三极管.CMOS管.从而实现千万门级大规模集成电路 ...

  2. Numpy怎样将数组读写到文件

    Numpy怎样将数组读写到文件 本文档介绍的是Numpy以自己内建二进制的方式,将数组写出到文件,以及从文件加载数组: 如果是文本.表格类数据,一般使用pandas这个类库做加载和处理,不用numpy ...

  3. python爬虫---虎牙直播封面采集

    代码: import requests from lxml import etree # html解析库 source = requests.get("https://www.huya.co ...

  4. CentOS 7.9 网络配置

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 (45条消息) CentOS 7.9 网络配置_$青的博客-CSDN博客_centos7.9网卡配置

  5. 彻底弄懂小程序e.target与e.currentTarget

    一.小程序中关于事件对象  e  的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...

  6. linux设备管理之主设备号与次设备号

    主设备号和次设备号 一个字符设备或者块设备都有一个主设备号和次设备号.主设备号和次设备号统称为设备号.主设备号用来表示一个特定的驱动程序.次设备号用来表示使用该驱动程序的其他设备.(主设备号和控制这类 ...

  7. python数据类型内置的方法

    数据类型的内置方法 在日常生活中不同类型的数据具有不同的功能 eg:表格数据文件具有处理表格的各项功能(透视表 图形化 公式计算) 视频数据文件具有快进 加速等各项功能 ... 1.整型int # 方 ...

  8. ArrayList扩容问题

    今天上午上课在看JavaSE的面经,其中有问关于ArrayList和LinkedList的区别,就突然思考到,既然ArrayList是采用数组形式存储数据,对比我们自己使用到的数组,为什么ArrayL ...

  9. AcWing周赛44

    周赛44 4317. 不同正整数的个数 link:https://www.acwing.com/problem/content/4320/ 我直接set #include <iostream&g ...

  10. Git删除已提交的文件

    Git删除已提交的文件 Git删除已提交的文件 定位文件 删除文件 参考链接 昨天通过Git Bash提交代码的时候遇到了由于单个文件大小超过100M,导致代码上传失败的问题.考虑到那个大文件是用于训 ...