好客租房40-react组件基础综合案例-案例需求分析
实现 案例的数据
渲染评论列表 有评论
没有评论 暂无评论
获取评论信息 包括评论人和受控组件
发表评论 更新评论
//导入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组件基础综合案例-案例需求分析的更多相关文章
- 好客租房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:类组件必须以大写字母开头 ...
- 好客租房41-react组件基础综合案例-渲染列表数据
1渲染列表 在state定义数据 进行数据渲染 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 ...
- 好客租房42-react组件基础综合案例-渲染列表无数据并优化
渲染列表评论 1判断列表数据的长度是否为0 2如果为0 则渲染暂无评论 //导入react import React from 'react' import ReactDOM from 'react- ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
- 七个不可错过的React组件库与开发框架
React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用.从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分 ...
- React组件略讲
React是前端组件化开发的开山鼻祖,这种开发方式彻底解决了的前端组件复用的痛点.今天,就来研究一下React组件开发. 前端同学一般都会从Vue入门,因为Vue使用的<template> ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
随机推荐
- 6_比例积分控制器_PI控制
- 好用开源的C#快速开发平台
NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展,让Web开发更迅速.简单.NFine是一套基于 ASP.NET ...
- C#编写一个控制台应用程序,可根据输入的月份判断所在季节
编写一个控制台应用程序,可根据输入的月份判断所在季节 代码: using System; using System.Collections.Generic; using System.Linq; us ...
- ES6(Promise)等一个函数执行完后再执行另一个函数
function text1(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve(cons ...
- 支付宝小程序中“<”号写法
今天遇到一个小问题,记录一下 "<"号在h5页面都是可以直接显示的,但是在运行支付宝小程序时报错,找了一个解决办法 <text> {{char_lt}} 18.5 ...
- LazyCaptcha自定义随机验证码和字体
介绍 LazyCaptcha是仿EasyCaptcha和SimpleCaptcha,基于.Net Standard 2.1的图形验证码模块. 目前Gitee 52star, 如果对您有帮助,请不吝啬点 ...
- MySQL性能优化的5个维度
面试官如果问你:你会从哪些维度进行MySQL性能优化?你会怎么回答? 所谓的性能优化,一般针对的是MySQL查询的优化.既然是优化查询,我们自然要先知道查询操作要经过哪些环节,然后思考可以在哪些环节进 ...
- Java学习day31
同步方法的机制:synchronized,包括synchronized方法和synchronized块 同步方法:public synchronized void method(int args){ ...
- 基于全志A40i开发板——Linux-RT内核应用开发教程(1)
目录 1 Linux-RT内核简介 3 2 Linux系统实时性测试 3 3 rt_gpio_ctrl案例 10 4 rt_input案例 15 本文为Linux-RT内核应用开发教程的第一章节--L ...
- 【基础】字符编码-ASCII、Unicode、utf-8
一.各自背景 1. ASCII ASCII 只有127个字符,表示英文字母的大小写.数字和一些符号.但由于其他语言用ASCII编码表示字节不够,例如:常用中文需要两个字节,且不能和ASCII冲突,中国 ...