react实现评论列表案例

最新推荐文章于 2024-06-03 10:05:22 发布
最新推荐文章于 2024-06-03 10:05:22 发布
阅读量802 收藏 10
点赞数 3
分类专栏： react案例 文章标签： react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/125121842
版权

在学习了 react 的 JSX 语法以及 类组件 后，现在我们来实现一个 评论列表案例

对应该案例主要有以下几个功能点：

  1. 列表展示功能
  2. 发表评论功能 
  3. 清空评论功能
  4. 删除评论功能

对于该案例的静态结构以及样式这里就不去过多的进行说明了，我们直接给出它的静态结构和样式

src/index.css

.app {
  width: 300px;
  padding: 10px;
  border: 1px solid #999;
}

.user {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.no-comment {
  text-align: center;
  margin-top: 30px;
}

src/index.js

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import './index.css'

/* 
  主要实现的功能：
    1. 展示评论功能
    2. 清空评论功能
    3. 发表评论功能
    4. 删除评论功能
    5. 没有更多评论的处理
*/
class App extends Component {
  render() {
    return (
      <div className="app">
        <div>
          <input className="user" type="text" placeholder="请输入评论人" />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          <button>发表评论</button>
          <button>清空评论</button>
        </div>
        <ul>
          <li>
            <h3>评论人：刘德华</h3>
            <p>评论内容：冰雨</p>
            <button>删除</button>
          </li>
        </ul>
        <div className="no-comment">暂无评论</div>
      </div>
    )
  }
}

// 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
const element = (
    <React.Fragment>
        <App></App>
    </React.Fragment>
  );
  
  // 参数1：渲染的 react 元素即虚拟 DOM
  // 参数2：需要渲染到哪个容器中
  const root = ReactDom.createRoot(document.getElementById('root'));
  root.render(element);

先来看一下样式吧

 

列表展示功能：

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

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

  • 使用数组的map方法遍历列表数据

  • 给每个li添加key属性

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import './index.css'

/* 
  主要实现的功能：
    1. 展示评论功能
      1.1 通过 state 提供评论列表数据
      1.2 通过 map 动态渲染
    2. 清空评论功能
    3. 发表评论功能
    4. 删除评论功能
    5. 没有更多评论的处理
*/
class App extends Component {
  state = ({
    list: [
      {
        id: 1,
        name: '张三',
        content: '宝，我昨天去输液了。你知道是输的什么液吗？是想你的夜'
      },
      {
        id: 2,
        name: '李四',
        content: '哈哈，笑死！！！居然还有这种土味情话'
      },
      {
        id: 3,
        name: '王五',
        content: '我要定一个小目标，那就是先挣它一个亿！'
      },
      {
        id: 4,
        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>
          <button>清空评论</button>
        </div>
        <ul>
          {
            this.state.list.map(item =>
              <li key={item.id}>
                <h3>评论人：{item.name}</h3>
                <p>评论内容：{item.content}</p>
                <button>删除</button>
             </li>
            )
          }
        </ul>
        <div className="no-comment">暂无评论</div>
      </div>
    )
  }
}

// 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
const element = (
    <React.Fragment>
        <App></App>
    </React.Fragment>
  );
  
  // 参数1：渲染的 react 元素即虚拟 DOM
  // 参数2：需要渲染到哪个容器中
  const root = ReactDom.createRoot(document.getElementById('root'));
  root.render(element);

 

清空评论功能：

  • 给清空评论按钮注册事件

  • 清空评论列表

  • 没有更多评论的处理

 

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import './index.css'

/* 
  主要实现的功能：
    1. 展示评论功能
      1.1 通过 state 提供评论列表数据
      1.2 通过 map 动态渲染
    2. 清空评论功能
    3. 发表评论功能
    4. 删除评论功能
    5. 没有更多评论的处理
*/
class App extends Component {
  state = ({
    list: [
      {
        id: 1,
        name: '张三',
        content: '宝，我昨天去输液了。你知道是输的什么液吗？是想你的夜'
      },
      {
        id: 2,
        name: '李四',
        content: '哈哈，笑死！！！居然还有这种土味情话'
      },
      {
        id: 3,
        name: '王五',
        content: '我要定一个小目标，那就是先挣它一个亿！'
      },
      {
        id: 4,
        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>
          <button onClick={this.clearAll}>清空评论</button>
        </div>
        {
          // this.state.list.length === 0 ? (<div className="no-comment">暂无评论</div>) : 
          // (
          //   <ul>
          //   {
          //     this.state.list.map(item =>
          //       <li key={item.id}>
          //         <h3>评论人：{item.name}</h3>
          //         <p>评论内容：{item.content}</p>
          //         <button>删除</button>
          //     </li>
          //     )
          //   }
          //  </ul>
          // )
          // 或者下面这种做法
        }
        {
          this.renderList()
        }
      </div>
    )
  }
  // 清空评论
  clearAll = () => {
    this.setState({
      list: []
    })
  }
  // 没有更多评论的处理
  renderList() {
    if(this.state.list.length === 0) {
      return (<div className="no-comment">暂无评论</div>);
    } else {
      return (
        <ul>
        {
          this.state.list.map(item =>
            <li key={item.id}>
              <h3>评论人：{item.name}</h3>
              <p>评论内容：{item.content}</p>
              <button>删除</button>
          </li>
          )
        }
       </ul>
      )
    }
  }
}

// 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
const element = (
    <React.Fragment>
        <App></App>
    </React.Fragment>
  );
  
  // 参数1：渲染的 react 元素即虚拟 DOM
  // 参数2：需要渲染到哪个容器中
  const root = ReactDom.createRoot(document.getElementById('root'));
  root.render(element);

 

删除评论功能：

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import './index.css'

/* 
  主要实现的功能：
    1. 展示评论功能
      1.1 通过 state 提供评论列表数据
      1.2 通过 map 动态渲染
    2. 清空评论功能
    3. 发表评论功能
    4. 删除评论功能
    5. 没有更多评论的处理
*/
class App extends Component {
  state = ({
    list: [
      {
        id: 1,
        name: '张三',
        content: '宝，我昨天去输液了。你知道是输的什么液吗？是想你的夜'
      },
      {
        id: 2,
        name: '李四',
        content: '哈哈，笑死！！！居然还有这种土味情话'
      },
      {
        id: 3,
        name: '王五',
        content: '我要定一个小目标，那就是先挣它一个亿！'
      },
      {
        id: 4,
        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>
          <button onClick={this.clearAll}>清空评论</button>
        </div>
        {
          this.renderList()
        }
      </div>
    )
  }
  // 清空评论
  clearAll = () => {
    this.setState({
      list: []
    })
  }
  // 没有更多评论的处理
  renderList() {
    if(this.state.list.length === 0) {
      return (<div className="no-comment">暂无评论</div>);
    } else {
      return (
        <ul>
        {
          this.state.list.map(item =>
            <li key={item.id}>
              <h3>评论人：{item.name}</h3>
              <p>评论内容：{item.content}</p>
              {
                // 传参写法：
                  // 写法1：<button onClick={() => this.del(item.id)}>删除</button>
                  // 写法2：<button onClick={this.del.bind(this, item.id)}>删除</button>
              }
              <button onClick={this.del.bind(this, item.id)}>删除</button>
          </li>
          )
        }
       </ul>
      )
    }
  }
  // 删除评论功能
  del = (id) => {
    // console.log(id);
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }
}

// 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
const element = (
    <React.Fragment>
        <App></App>
    </React.Fragment>
  );
  
// 参数1：渲染的 react 元素即虚拟 DOM
// 参数2：需要渲染到哪个容器中
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(element);

 

发表评论功能 ：

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

  • 使用受控组件的方式获取评论数据

发表评论，更新评论列表（更新状态）

  • 给comments增加一条数据

边界处理

  • 清空内容

  • 判断非空

/**
 * 1. 导入react和react-dom
 * 2. 创建 react 元素
 * 3. 把 react 元素渲染到页面
 */
 import React from 'react';
 import ReactDom from 'react-dom/client';
 import { Component } from 'react';
 import './index.css'

/* 
  主要实现的功能：
    1. 展示评论功能
      1.1 通过 state 提供评论列表数据
      1.2 通过 map 动态渲染
    2. 清空评论功能
    3. 发表评论功能
    4. 删除评论功能
    5. 没有更多评论的处理
*/
class App extends Component {
  state = ({
    list: [
      {
        id: 1,
        name: '张三',
        content: '宝，我昨天去输液了。你知道是输的什么液吗？是想你的夜'
      },
      {
        id: 2,
        name: '李四',
        content: '哈哈，笑死！！！居然还有这种土味情话'
      },
      {
        id: 3,
        name: '王五',
        content: '我要定一个小目标，那就是先挣它一个亿！'
      },
      {
        id: 4,
        name: '赵六',
        content: '嚯哟，您这小目标可真是够小的，祝早日实现！！!'
      }
    ],
    name: '',
    content: ''
  })
  render() {
    return (
      <div className="app">
        <div>
          <input className="user" type="text" placeholder="请输入评论人" value={this.state.name} onChange={this.handleChange} name="name" />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
            value={this.state.content}
            onChange={this.handleChange}
            name="content"
          />
          <br />
          <button onClick={this.add}>发表评论</button>
          <button onClick={this.clearAll}>清空评论</button>
        </div>
        {
          this.renderList()
        }
      </div>
    )
  }
  // 清空评论
  clearAll = () => {
    this.setState({
      list: []
    })
  }
  // 没有更多评论的处理
  renderList() {
    if(this.state.list.length === 0) {
      return (<div className="no-comment">暂无评论</div>);
    } else {
      return (
        <ul>
        {
          this.state.list.map(item =>
            <li key={item.id}>
              <h3>评论人：{item.name}</h3>
              <p>评论内容：{item.content}</p>
              <button onClick={this.del.bind(this, item.id)}>删除</button>
          </li>
          )
        }
       </ul>
      )
    }
  }
  // 删除评论功能
  del = (id) => {
    // console.log(id);
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }
  // 发表评论功能
  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    })
  }
  add = () => {
    const { name, content, list } = this.state;
    // 当 name 或者 content 没有值
    if(!name || !content){
      return alert('信息不完整！');
    }
    // 添加评论
    this.setState({
      list: [{id: Date.now(), name: name, content: content} ,...list],
      name: '',
      content: '' 
    })
  }
}

// 幽灵节点：节点不会渲染任何的内容，跟 vue 里面的 template 标签一样
const element = (
    <React.Fragment>
        <App></App>
    </React.Fragment>
  );
  
// 参数1：渲染的 react 元素即虚拟 DOM
// 参数2：需要渲染到哪个容器中
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(element);

 

 

小白小白从不日白
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React 组件基础使用综合案例（发表评论列表）
keinee的博客
10-06 460
评论列表1. 需求分析2.实现步骤2.1.渲染评论列表2.2.渲染暂无评论2.3.获取评论信息2.4.发表评论 1. 需求分析 渲染评论列表（列表渲染） 没有评论数据时渲染：暂无评论（条件渲染） 获取评论信息，包括评论人和评论内容（受控组件） 发表评论，更新评论列表（ setState() ） 2.实现步骤 2.1.渲染评论列表 在 state 中初始化评论列表数据 使用数组的 map 方法遍历 state 中的列表数据 给每个被遍历的 li 元素添加 key 属性 //index.js impor
React组件基础综合案例之评论列表
再中二也会被现实打败
12-08 350
React组件基础综合案例之评论列表
推荐：轻量级React星评组件 - react-star-rating
gitblog_00055的博客
06-03 251
推荐：轻量级React星评组件 - react-star-rating 项目地址:https://gitcode.com/ninjasort/react-star-rating 1、项目简介 react-star-rating是一个简单易用的React组件，用于创建动态星评系统。只需几行代码，就能在你的应用中添加互动式、可自定义的评分功能。它的设计简洁，支持多种配置选项，适用于各种场景，从在线商店...
vue实现评论列表
weixin_49199038的博客
09-18 1832
实现功能：发表评论、本地存储、显示列表 页面加载，从本地localStorage中获得数据 子组件中，获取原数据，添加新数据，加入到localStorage 点击发表评论时，调用第二步定义的方法，重新加载数据 借助bootstrap页面布局，包含评论人、评论内容、提交按钮以及评论列表 定义子组件，子组件包含了评论人、评论内容、提交按钮 页面加载： methods定义方法：获得localStorage中的数据，转为数组对象，置为父组件中data定义的list，借助v-for循环输出 2. 需要思考该方
React技术栈 --》组件对比和评论列表案例 ## Day4
ztK63LrD的博客
06-22 618
深入了解React框架，保姆级学习。
react react路由使用掌握
在下月亮有何贵干
05-06 1198
react 路由的使用依靠 react-router-dom，今天进行一个系统的使用示范进行记录学习。内容包括：基本路由结构、顶级路由的提取、实现keepAlive的方法。注意：以下代码都运行于 react 项目中，学习前请自行创建简单 react 项目。
React实现评论的添加和删除
01-18
输入内容被追加到右侧评论列表； 2. 点击评论列表的“删除”按钮，弹框提示确定删除用户“xx”； 3. 点击“确定”，“xx”用户发表的评论被删除； 4. 所有评论均被删除时，显示“暂无评论，点击添加评论！！！” 三...
通过React 编写B站评论案例
最新发布
06-26
首先，我们要实现的是**评论列表渲染**。在React中，组件是构建用户界面的基本单元。为了展示评论列表，我们需要创建一个CommentList组件。该组件接收评论数据作为props，并使用map函数遍历数组，为每条评论生成一个...
react的案例-豆瓣网
01-16
React Router是一个流行的库，它允许你在React应用中实现客户端路由，使用户能够在不刷新页面的情况下切换不同视图。例如，你可以定义不同的路由来显示豆瓣网的主页、电影页面、书籍页面等。 总结，这个“react的...
React小书（完整版）1
08-04
每个阶段的末尾都有实战分析，将所学知识应用到具体实践中，如通过评论功能的实现来巩固理解。 总体而言，《React小书（完整版）1》是一本适合React.js初学者的详尽教程，它不仅覆盖了React的基础知识，还涵盖了...
React+springboot实现的个人博客系统.zip
08-03
在这个博客系统中，React可能被用来创建文章列表、文章详情、评论区等各个功能模块。 2. SpringBoot：SpringBoot是基于Spring框架的快速开发工具，简化了Spring应用的初始搭建及配置过程。它集成了大量的常用依赖，...
评论列表-React：评论列表
02-12
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中
react结合bootstrap实现评论功能
10-15
主要为大家详细介绍了react结合bootstrap实现评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React-Demo
探鱼不是鱼
10-25 200
react数据渲染 需求 需求：实现评论列表功能 // - 如果有评论数据，就展示列表结构 li（ 列表渲染 ）要包含a标签 // - name 表示评论人，渲染 h3 // - content 表示评论内容，渲染 p // - 如果没有评论数据，就展示一个 h1 标签，内容为： 暂无评论！ // - 根据自己的喜好添加样式 // - 给a标签注册点击事件, 打印内容 code <script type="text/babel"> const list = [ {
React 评论功能（三级评论）实现 (Hooks+node)
JIANGhanha的博客
03-13 1866
React 社区交流/博客评论区的基本实现思路参考
【React】实现评论的添加和删除
zqq_2016的博客
10-18 736
一、效果图 二、需求描述 1. 手动输入用户名和评论内容，点击提交；输入内容被追加到右侧评论列表； 2. 点击评论列表的“删除”按钮，弹框提示确定删除用户“xx”； 3. 点击“确定”，“xx”用户发表的评论被删除； 4. 所有评论均被删除时，显示“暂无评论，点击添加评论！！！” 三、代码实现 App.js import React from 'react'; import './App.c...
React.js官网的评论列表
做一个NB的码农，且不止于码农
01-05 737
container--------------commentBox 评论列表----commentList 评论内容---comment 评论内容---comment 评论列表---- 写评论的组件---commentForm container--------------1.获取评论数据（1）在服务端写mock模拟数据--取得API接口的URL
React 基础知识
m0_59550122的博客
10-06 350
React 基础知识
react实现列表图片懒加载
07-15
在 React 中实现列表图片的懒加载，我们可以结合使用 `react-lazyload` 库和 `Intersection Observer API`。以下是基于这两个工具的实现步骤： 1. 首先，安装 `react-lazyload` 库。 ```bash npm install react-lazyload ``` 2. 在列表组件中引入 `react-lazyload` 组件，并使用 `Intersection Observer API` 监听图片是否进入可视区域。 ```jsx import React from 'react'; import LazyLoad from 'react-lazyload'; const ListItem = ({ imageUrl, altText }) => { return ( <LazyLoad> <img src={imageUrl} alt={altText} /> </LazyLoad> ); }; const ListComponent = ({ items }) => { return ( <ul> {items.map((item) => ( <li key={item.id}> <ListItem imageUrl={item.imageUrl} altText={item.altText} /> </li> ))} </ul> ); }; export default ListComponent; ``` 在上述代码中，我们使用 `react-lazyload` 组件包裹了 `<img>` 元素，并将图片的地址和替代文本作为属性传递给子组件 `ListItem`。当图片进入可视区域时，`react-lazyload` 会自动加载图片。 3. 在父组件中使用 `ListComponent`，并传递图片数据给列表组件。 ```jsx import React from 'react'; import ListComponent from './ListComponent'; const App = () => { const items = [ { id: 1, imageUrl: 'image1.jpg', altText: 'Image 1' }, { id: 2, imageUrl: 'image2.jpg', altText: 'Image 2' }, { id: 3, imageUrl: 'image3.jpg', altText: 'Image 3' }, // 更多图片数据 ]; return ( <div> <h1>List of Images</h1> <ListComponent items={items} /> </div> ); }; export default App; ``` 在父组件中，我们创建了一个包含图片数据的数组，并将其传递给列表组件 `ListComponent`。列表组件会根据传递的数据生成相应的图片项。 通过以上步骤，我们可以在 React 中实现列表图片的懒加载。 `react-lazyload` 库会自动处理图片的加载，只有当图片进入可视区域时才进行加载，从而提升页面性能和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值