实现 案例的数据

渲染评论列表 有评论

没有评论 暂无评论

获取评论信息 包括评论人和受控组件

发表评论 更新评论

//导入react
import React from 'react'
import ReactDOM from 'react-dom'
//导入组件
// 约定1:类组件必须以大写字母开头
// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
// 约定3:组件必须提供render方法
// 约定4:render方法必须有返回值
 
class HelloWorld extends React.Component {
    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>
                </ul>
            </div>
        )
    }
}
 
ReactDOM.render(<HelloWorld />, document.getElementById('root'))
运行结果

好客租房40-react组件基础综合案例-案例需求分析的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  7. 七个不可错过的React组件库与开发框架

    React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用.从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分 ...

  8. React组件略讲

    React是前端组件化开发的开山鼻祖,这种开发方式彻底解决了的前端组件复用的痛点.今天,就来研究一下React组件开发. 前端同学一般都会从Vue入门,因为Vue使用的<template> ...

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

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

随机推荐

  1. 6_比例积分控制器_PI控制

  2. 好用开源的C#快速开发平台

    NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展,让Web开发更迅速.简单.NFine是一套基于 ASP.NET ...

  3. C#编写一个控制台应用程序,可根据输入的月份判断所在季节

    编写一个控制台应用程序,可根据输入的月份判断所在季节 代码: using System; using System.Collections.Generic; using System.Linq; us ...

  4. ES6(Promise)等一个函数执行完后再执行另一个函数

    function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...

  5. 支付宝小程序中“<”号写法

    今天遇到一个小问题,记录一下 "<"号在h5页面都是可以直接显示的,但是在运行支付宝小程序时报错,找了一个解决办法 <text> {{char_lt}} 18.5 ...

  6. LazyCaptcha自定义随机验证码和字体

    介绍 LazyCaptcha是仿EasyCaptcha和SimpleCaptcha,基于.Net Standard 2.1的图形验证码模块. 目前Gitee 52star, 如果对您有帮助,请不吝啬点 ...

  7. MySQL性能优化的5个维度

    面试官如果问你:你会从哪些维度进行MySQL性能优化?你会怎么回答? 所谓的性能优化,一般针对的是MySQL查询的优化.既然是优化查询,我们自然要先知道查询操作要经过哪些环节,然后思考可以在哪些环节进 ...

  8. Java学习day31

    同步方法的机制:synchronized,包括synchronized方法和synchronized块 同步方法:public synchronized void method(int args){ ...

  9. 基于全志A40i开发板——Linux-RT内核应用开发教程(1)

    目录 1 Linux-RT内核简介 3 2 Linux系统实时性测试 3 3 rt_gpio_ctrl案例 10 4 rt_input案例 15 本文为Linux-RT内核应用开发教程的第一章节--L ...

  10. 【基础】字符编码-ASCII、Unicode、utf-8

    一.各自背景 1. ASCII ASCII 只有127个字符,表示英文字母的大小写.数字和一些符号.但由于其他语言用ASCII编码表示字节不够,例如:常用中文需要两个字节,且不能和ASCII冲突,中国 ...