React脚手架实现一个发布评论的小案例(易学)

案例：需求分析

① 渲染评论列表（列表渲染）

② 没有评论数据时渲染：暂无评论（条件渲染）

③ 获取评论信息，包括评论人和评论内容（受控组件）

④ 发表评论，更新评论列表（setState()）

实现步骤

1.渲染评论列表

① 在 state 中初始化评论列表数据

② 使用数组的map方法遍历state中的列表数据

③ 给每个被遍历的li元素添加key属性

export default class App extends Component {
  // 1.初始化状态
  state = {
    comments: [
      { id: 1, name: '李明', content: '沙发！！！' },
      { id: 2, name: '丹尼', content: '板凳~' },
      { id: 3, name: '詹尼', content: '楼主好人' }
    ]
  }
  render() {
    return (
      <div className="app">
        <div>
          <input className="user" type="text" placeholder="请输入评论人" />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          <button>发表评论</button>
        </div>

        <div className="no-comment">暂无评论，快去评论吧~</div&