React组件之评论列表案例

最新推荐文章于 2024-09-22 22:57:28 发布
最新推荐文章于 2024-09-22 22:57:28 发布
阅读量1k 收藏 4
点赞数 3
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48375854/article/details/122907927
版权

评论列表案例

根据前期所介绍的组件基础，实现一个评论列表的案例，要实现的功能分为四个部分：

  • 渲染评论列表（列表渲染）
  • 没有评论数据时渲染：暂无评论（条件渲染）
  • 获取评论信息，包括评论人和评论内容（受控组件）
  • 发表评论，更新评论列表（setState()）

初始搭建的页面结构为：

<style>
        .app{
            margin:20px auto;
            border:1px solid #ccc;
            width:270px;
            height:100%;
            padding:10px;
        }
        .user{
            width:260px;
            height: 15px;
        }
        .content{
            width:260px;
            margin-top:10px;
        }
    </style>

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        class App 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>评论人：王欢</h3>
                            <p>评论内容：前端！！！</p>
                        </li>
                    </ul>
                   </div>
               )
           }
        }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>

实现效果为：
在这里插入图片描述
接下来，就来一一实现其功能。如下所示：

1. 渲染评论列表

① 在 state 中初始化评论列表数据
② 使用数组的map方法遍历state中的列表数据
③ 给每个被遍历的li元素添加key属性
如下所示：

 //初始化状态
state = {
    comments:[
        {id:1,name:'小欢',content:'好好学习！'},
        {id:1,name:'小熊',content:'天天向上！'},
        {id:1,name:'小冉',content:'大佬出场！'}
    ]
}

<ul>
{
  this.state.comments.map(item=>(
      <li key={item.id}>
          <h3>评论人：{item.name}</h3>
          <p>评论内容：{item.content}</p>
      </li>
   ))
 }
</ul>

实现效果为：
在这里插入图片描述

2. 渲染暂无评论

① 判断列表数据的长度是否为0
② 如果为0，则渲染暂无评论
如下：

 {/* 渲染评论列表 */}
{ 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>)}

当将state里面的内容注释掉，可以得到：
在这里插入图片描述

3. 获取评论信息

① 使用受控组件方式处理表单元素
如下所示：
在state里面定义input和textarea输入的初始值，并获取输入的值，

 state = {
    comments:[
           //{id:1,name:'小欢',content:'好好学习！'},
          // {id:1,name:'小熊',content:'天天向上！'},
           //{id:1,name:'小冉',content:'大佬出场！'}
       ],
       username:'',
       userContent:''
   }
   handleForm=(e)=>{
       const {name,value}=e.target
       this.setState({
           [name]:value
       })
   }

 <input className='user' type="text" placeholder='请输入评论人'value={this.state.userName} name='userName' onChange={this.handleForm}/>
<br />
<textarea className="content" cols="30" rows="10" placeholder='请输入评论内容' value={this.state.userContent } name='userContent' onChange={this.handleForm}></textarea>

实现效果为：
在这里插入图片描述

4. 发表评论

① 给按钮绑定单击事件
② 在事件处理程序中，通过state获取评论信息
③ 将评论信息添加到state中，并调用 setState() 方法更新state
如下所示：

 add=()=>{
	  const {comments,userName,userContent} = this.state
	  const newComments = [{id:Math.random(),name:userName,content:userContent},...comments]
	   this.setState({
	       comments:newComments
	   })
	}

  <button onClick={this.add}>发表评论</button>

此时的实现效果为：
在这里插入图片描述
基本实现。但是我们发现这样并不美观，当我们内容发表完成后，文本框的内容并没有清空，而且不输入任何内容也可以发布。所以，我们接下来还要进行边界判断：
④ 边界情况：清空文本框
⑤ 边界情况：非空判断
如下所示：
如果输入内容为空，则弹出警示框，提示：请输入内容；且当输入内容发布完成后，文本框的内容清空。

//清除文本框的值即将state清空
this.setState({
	comments:newComments,
	  userName:'',
	  userContent:''
	})

 add=()=>{
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:''
   })
}

实现效果为：
在这里插入图片描述
完整代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react的js库/react.development.js"></script>
    <script src="../react的js库/react-dom.development.js"></script>
    <script src="../react的js库/babel.min.js"></script>
    <style>
        .app{
            margin:20px auto;
            border:1px solid #ccc;
            width:270px;
            height:100%;
            padding:10px;
        }
        .user{
            width:260px;
            height: 15px;
        }
        .content{
            width:260px;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root')
        class App extends React.Component{
            //初始化状态
            state = {
                comments:[
                    // {id:1,name:'小欢',content:'好好学习！'},
                    // {id:2,name:'小熊',content:'天天向上！'},
                    // {id:3,name:'小冉',content:'大佬出场！'}
                ],
                userName:'',
                userContent:''
            }
            handleForm=(e)=>{
                const {name,value}=e.target
                this.setState({
                    [name]:value
                })
            }
            add=()=>{
                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(){
               return (
                   <div className='app'>
                    <div >
                    <input className='user' type="text" placeholder='请输入评论人'value={this.state.userName} name='userName' onChange={this.handleForm}/>
                    <br />
                    <textarea className="content" cols="30" rows="10" placeholder='请输入评论内容' value={this.state.userContent } name='userContent' onChange={this.handleForm}></textarea>
                    <br />
                    <button onClick={this.add}>发表评论</button>
                    </div>
                    {/* 渲染评论列表 */}
                   { 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>)}
                   </div>
               )
           }
        }
        //元素渲染
        ReactDOM.render(<App />,root)
    </script>
</body>
</html>
bear*6
关注
专栏目录
React基础入门+综合案例
04-12
React是目前前端开发领域里应用最广泛的框架之一，也是目前很多大厂在用的框架，学好React可以增加找工作的砝码。本套课程是从学生的角度出发，将复杂的概念以通俗易懂的话术讲授出来，方便学生理解。可以帮助你快速的上手React框架开发。
react实现评论列表案例
小白小白从不日别的博客
06-04 959
在学习了 react 的 JSX 语法以及 类组件 后，实现的一个 评论列表案例。主要包括：发表评论、删除评论以及清空评论
【react案例】实现评论列表
最新发布
在热爱技术的路上一直前行。
09-22 671
【代码】【react案例】实现评论列表。
React - React 组件基础（发表评论案例）
小多的博客
10-21 525
需求分析 渲染评论列表（列表渲染） 没有评论数据时渲染：暂无评论（条件渲染） 获取评论信息，包括评论人和评论内容（受控组件） 发表评论，更新评论列表（setState()） 搭建评论列表的模板 结构 import React from 'react' import ReactDOM from 'react-dom' /* 评论列表案例 comments: [ { id: 1, name: '图图', content: '真不错！！！' }, { id: 2, name
【React】一个评论案例带你入门React组件基础
随心所欲的便笺
03-08 544
你不必一定成为玫瑰，路边的小花同样点缀大地🌼🌼🌼🌼🌼
React组件综合案例:发表评论案例
qq_52126119的博客
05-19 501
效果图 代码 js import React from "react"; import { createRoot } from "react-dom/client"; // 引入css import './css/index.css' class Hello extends React.Component { // 初始化评论列表数据 state = { comments: [ { id: 1, name: 'jack', content:
通过React 编写B站评论案例
06-26
这涉及到React组件的状态管理和事件处理。在CommentList组件中，我们需要维护一个状态来跟踪当前的评论列表。当用户点击删除按钮时，触发一个事件处理器，这个处理器会更新状态，移除相应的评论。React会自动根据...
【React框架】教程&案例&相关项目
06-19
下面是一个简单的React组件示例，展示了如何使用`useState`来管理组件状态： ```jsx import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); return ...
React零基础自学手册.pdf
03-31
- **render方法**：每个React组件必须实现的方法，返回一个描述UI的React元素。 - **返回值**：可以是一个JSX元素、数组、字符串等。 - **生命周期**：每次渲染时都会调用render方法。 #### 四、React.js进阶使用 #...
react的案例-豆瓣网
01-16
React是当前Web开发领域中最流行的前端框架之一，尤其在构建用户界面方面表现出色。它由Facebook开发并维护，以其高效、灵活和可复用的组件化理念引领了现代Web开发的潮流。本案例以“豆瓣网”为例，将深入探讨React...
React小书（完整版）1
08-04
总体而言，《React小书（完整版）1》是一本适合React.js初学者的详尽教程，它不仅覆盖了React的基础知识，还涵盖了实际开发中常用的技术点，通过实践案例帮助读者快速掌握React.js的实战技巧。对于希望通过React.js...
comments-react:使用 react.js 的评论框功能
06-30
评论React 使用 React.js 的评论框。
React技术栈 --》组件对比和评论列表案例 ## Day4
2401_85158559的博客
07-12 951
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库!真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲详情关注公中号【编程进阶路】VUE组件库级组件封装-高复用弹窗组件。
React 组件基础使用综合案例（发表评论列表）
keinee的博客
10-06 686
评论列表1. 需求分析2.实现步骤2.1.渲染评论列表2.2.渲染暂无评论2.3.获取评论信息2.4.发表评论 1. 需求分析 渲染评论列表（列表渲染） 没有评论数据时渲染：暂无评论（条件渲染） 获取评论信息，包括评论人和评论内容（受控组件） 发表评论，更新评论列表（ setState() ） 2.实现步骤 2.1.渲染评论列表 在 state 中初始化评论列表数据 使用数组的 map 方法遍历 state 中的列表数据 给每个被遍历的 li 元素添加 key 属性 //index.js impor
评论列表（React组件基础案例）
qq_53767416的博客
01-07 480
react组件基础综合案例，评论列表
react 实现评论管理页面
快乐de馒头
12-28 923
一、把页面拆分组件 可以拆分为4个组件，组件文件的后缀名可以是js，也可以是jsx格式。 二、主要代码 项目结构 入口文件 index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/app/app'; ReactDOM.render(...
探索Disqus React：一个强大的评论系统组件
gitblog_00064的博客
04-27 800
探索Disqus React：一个强大的评论系统组件 disqus-reactA React component for Disqus项目地址:https://gitcode.com/gh_mirrors/di/disqus-react 如果你正在寻找一种简单而高效的方式来在你的React应用中集成评论功能，那么可能就是你要的答案。这是一个官方维护的库，它将流行的Disqus评论系统与React...
React编写简单的评论功能
qq_64867440的博客
01-01 445
这段代码是使用`this.state.list.map()`方法对`this.state.list`数组进行遍历，然后根据数组中的每个元素创建一个``元素。按钮的类名设置为"two"，用于自定义样式。`onClick`：将`this.addContent`函数绑定到按钮的`click`事件，即点击按钮时触发`this.addContent`函数的执行；`value`：将输入框的值绑定到`this.state.message`，即显示`this.state.message`作为输入框的初始值；
6.评论列表、评论详情
weixin_45974277的博客
01-23 1117
评论列表： 接口url：/comments/article/{id} 请求方式：GET 请求参数： 参数名称 参数类型 说明 id long 文章id（路径参数） 返回数据 { "success": true, "code": 200, "msg": "success", "data": [ { "id": 53, "author": {
React实战教程：B站评论功能的构建与实现
在React组件中，我们可以根据用户的交互（比如点击排序按钮）来触发这个排序函数，并更新评论列表的状态。 ```javascript // 排序函数示例 const sortComments = (comments, sortBy) => { return [...comments]....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值