博客

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 = {
        comments:[],
        userName: "",
        userContent: "",
    };
    renderList(){
      return  this.state.comments.length === 0 ? 
                    (
                        <div className='no-comment'>暂无评论，快去评论吧~</div> 
                    )
                    : (
                        <ul>
                   {this.state.comments.map(item =>(
                    <li key={item.id}>
                        <h3>评论人：{item.name}</h3>
                        <p>评论内容：{item.content}</p>
                    </li>
                   ))}
                </ul>
                    )
    }
    handleForm = (e) => {
        const {name,value} = e.target
        this.setState({
            [name]: value
        })
    }
    addComment = (e) => {
        const{comments,userName, userContent} = this.state;
        if(userName.trim() === ''|| userContent.trim() === '') {
            alert('请输入用户名或内容');
            return
        }
        const newComments =[{
            id: Math.random(),
            name: userName,
            content: userContent
        },...comments]
        this.setState({comments: newComments,userName:'',userContent:''})
    }
    render() {
        const{userName, userContent} = this.state;
        return(
            <div className='app'>
                <div>
                <input className='user' type="text" placeholder = "请输入评论人" value={userName} name="userName" onChange={this.handleForm}/>
                <br />
                <textarea
                className='content' 
                cols="30"
                rows="10"
                placeholder = "请输入评论内容"
                value={userContent}
                name="userContent"
                onChange={this.handleForm}
                />
                <br/>
                <button onClick={this.addComment}>发表评论</button>
                </div>
                {
                  this.renderList()
                }  
            </div>
           
            )
        }
    }

ReactDOM.render(<App />, document.getElementById('root'));//渲染组件

index.css源码：

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.app {
  width: 300px;
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid black;
  padding: 5px;
  background-color: rgb(215, 248, 248);
}

.user{
  width: 280px;
  margin:5px;
  border: 1px solid black;
}
.content{
    width: 280px;
    margin:5px;
    border: 1px solid black;
}

.no-comment{
text-align: center;
margin: 20px;
}
button{
  margin: 5px;
  background-color: rgb(244, 200, 200);
}