实现 案例的数据
渲染评论列表 有评论
没有评论 暂无评论
获取评论信息 包括评论人和受控组件
发表评论 更新评论
//导入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'))