React组件基础综合案例之评论列表

React项目结构：

效果图：

1.需求分析：
 - 渲染评论列表（列表渲染）
 - 没有评论时数据的渲染：暂无评论（条件渲染）
 - 获取评论信息，包括评论人和评论内容（受控组件）
 - 发表评论，更新评论列表（setState()）
2.实现步骤：
 - 在state中初始化评论列表数据
 - 使用数组的map方法遍历state中的列表数据
 - 给每个被遍历的li元素添加key属性
 - 判断列表数据的长度是否为0，如果为0，则渲染暂无评论
 - 使用受控组件方式处理表单元素
 - 给按钮绑定单击事件
 - 在事件处理程序中，通过state获取评论信息
 - 将评论信息添加到state中，并调用setState（）方法更新state
 - 边界情况：清空文本框，非空判断

源码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    state =