react渲染列表信息(简单易学)

2024-04-04 04:12

本文主要是介绍react渲染列表信息(简单易学),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.新建个文件夹,启动终端,使用create-react-app my-react命令创建项目,其中my-react是自定义项目名称。

2.删除根目录src文件夹下多余文件,保留index.js和index.css文件

3.安装scss需要的依赖,使用npm install --save node-sass,npm install --save sass-loader命令进行安装并在根文件夹处引入

4.引入react中的useState

5.在src根目录下创建图片文件夹images并存入背景图片

5.撰写代码

App.js中文件代码如下:

import { useState } from 'react'

import './App.scss'

import avator from './images/avator.jpg'

//评论列表数据

const list = [

  {

    rpid: 1, //评论id

    user: {

      //用户信息

      uid: '13258165',

      avator: 'http://toutiao.itheima.net/resources/images/9.jpg',

      uname: '周杰伦',

    },

    content: '哎呦,不错哦', //评论内容

    ctime: '10-25 12:15', //评论时间

    like: 88,

  },

  {

    rpid: 2, //评论id

    user: {

      //用户信息

      uid: '36080105',

      avator: 'http://toutiao.itheima.net/resources/images/98.jpg',

      uname: '许嵩',

    },

    content: '我寻你千百度,日出到迟暮', //评论内容

    ctime: '04-12 08:45', //评论时间

    like: 98,

  },

  {

    rpid: 3, //评论id

    user: {

      //用户信息

      uid: '13258165',

      avator: 'http://toutiao.itheima.net/resources/images/56.jpg',

      uname: '王心凌',

    },

    content: '或许失败过,但从未认输', //评论内容

    ctime: '12-18 19:02', //评论时间

    like: 120,

  },

  {

    rpid: 4, //评论id

    user: {

      //用户信息

      uid: '19858625',

      avator: 'http://toutiao.itheima.net/resources/images/67.jpg',

      uname: '徐凯',

    },

    content: '没有永远的敌人', //评论内容

    ctime: '11-20 20:15', //评论时间

    like: 120,

  },

]

//当前登录用户信息

const user = {

  //用户id

  uid: '30009257',

  //用户头像

  avator,

  //用户昵称

  uname: '徐凯工作室',

}

//导航tab数组

const tabs = []

const App = () => {

  const [commentList, setCommentList] = useState(list)

  return (

    <div className="app">

      {/* 导航 Tab*/}

      <div className="reply-navigation"></div>

      <div className="reply-wrap">

        {/*  发表评论 */}

        <div className="box-normal"></div>

        {/*  评论列表 */}

        <div className="reply-list">

          {/*  评论项 */}

          {commentList.map((item) => (

            <div className="reply-item" key={item.rpid}>

              {/*头像 */}

              <div className="root-reply-avator">

                <div className="bili-avator">

                  <img className="bili-avator-img" alt="" src={item.user.avator}/>

                </div>

              </div>

              <div className="content-wrap">

                {/*用户名 */}

                <div className="user-info">

                  <div className="user-name">{item.user.uname}</div>

                </div>

                {/*评论内容 */}

                <div className="root-reply">

                  <span className="reply-content">{item.content}</span>

                  <div className="reply-info">

                    {/*评论时间 */}

                    <span className="reply-time">{item.ctime}</span>

                    {/*评论数量 */}

                    <span className="reply-count">点赞数:{item.like}</span>

                    {/*删除 */}

                    <span className="reply-delete">{'删除'}</span>

                  </div>

                </div>

              </div>

            </div>

          ))}

        </div>

      </div>

    </div>

  )

}

export default App

App.scss文件中代码如下:

.app {

    width:100%;

    height: 100%;

}

.reply-wrap{

    height:100%;

    background: url('./images/bg.jpg') no-repeat;

    background-size: 100% 100%;

    padding:20px;

    .reply-item{

        width:100%;

        height: 130px;

        display: flex;

        justify-content: flex-start;

        margin-top:10px;

        .root-reply-avator{

            width:5%;

            .bili-avator{

                .bili-avator-img{

                    width:60px;

                    height:60px;

                    border-radius:50%;

                }

            }

        }

        .content-wrap{

            width:95%;

            overflow: hidden;

            border-bottom: 2px solid darkgray;

            .user-info{

                .user-name{

                    font-size: 16px;

                    color:darkgray;

                    font-weight: 500;

                }

            }

            .root-reply{

                margin-top:25px;

                .reply-content{

                    font-size: 20px;

                    color:chocolate;

                    font-weight: 700;

                }

                .reply-info{

                    font-size: 14px;

                    color:darkgray;

                    font-weight: 500;

                    margin-top:15px;

                    .reply-time{

                        margin-right:25px;

                    }

                    .reply-count{

                        margin-right:25px;

                    }

                    .reply-delete{

                        cursor: pointer;

                    }

                    .reply-delete:hover{

                        color:cornflowerblue;

                    }

                }

            }

        }

    }

}

最终结果如下:

这篇关于react渲染列表信息(简单易学)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/874765

相关文章

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行