好客租房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'))
运行结果
最新文章
- Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化
- Button模板,样式
- PHP 5.5 新特性
- iOS开发之网络编程--1、NSURLSession的基本使用
- 山东省第四届acm.Rescue The Princess(数学推导)
- nyist 593 Take it easy
- windows 系统中打开一个数字证书所经历的过程
- Unity 时间缩放状态下的特效播放
- Android Studio中自己定义快捷输入块
- java对象的内存分配
- 12.04 ubuntu 进入登录界面,账号密码确定是正确的但是进不来系统。
- 如何获取DOM中当前获取焦点的元素
- Vuex(一)——vuejs的状态管理模式
- ContentProvider、ContentResolver、ContentObserver之间的关系
- Golang里实现Http服务器并解析header参数和表单参数
- 深入解析OpenCart的代理类proxy
- MyEclipse 的智能提示设置 使开发写代码的速度更快
- word2vec概述
- oracle 查看处理锁表
- springBoot(1)---springboot初步理解
热门文章
- k-medoids算法
- C++类中隐藏的六个默认函数
- Muse UI遇到的坑
- 活字格发布新版本,插件公开,引领Web开发新潮流
- Android bluetoothAdapter.startDiscovery()无法搜索设备问题解决办法
- 关于webpack,你想知道的都在这;
- 【.NET 6】使用EF Core 访问Oracle+Mysql+PostgreSQL并进行简单增改操作与性能比较
- Vue入坑日记: day - 01
- 一. 为什么要用SpringMVC框架
- Hash冲突以及解决