React 基础案例 | 支持左右按钮点击查看信息的卡片组件（二）

最新推荐文章于 2024-07-11 16:03:41 发布

前端达人

最新推荐文章于 2024-07-11 16:03:41 发布

阅读量945

点赞数 1

文章标签： python js java html javascript

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/119192927

版权

本文介绍了如何使用React实现一个卡片组件，该组件支持通过点击左右按钮切换显示不同的用户信息。文章详细讲解了从创建项目、设计数据结构、编写CSS到实现Review组件的全过程，强调了useState Hook的应用，并提供了完整代码示例。

摘要由CSDN通过智能技术生成

一、开篇

大家好，本篇文章小编将和大家一起实现一个用左右点击的方式翻看卡片信息的组件，这个组件很常用，一般会在网站上显示案例或团队成员的信息。通过本案例我们继续练习 useState Hook 在实际案例场景中的应用。

二、案例展示

如下视频所示，一个展示个人信息的卡片，我们可以点击卡片下方的左右按钮进行切换卡片的信息，用户的信息循环展示（信息数组的两端头尾连接循环），同时加了一个随机显示的按钮，点击按钮随机显示用户的信息。

三、创建项目

开始之前，我们通过 create-react-app 命令创建项目文件夹 reviews，接下来删除一些不相关的文件，保留 App.js、index.css、index.js，index.js 文件内容如下：

import React from 'react';
import Review from './Review';
function App() {
  return (
      <main>
        <p className="container">
          <div className="title">
            <h2>our reviews</h2>
            <div className='underline'></div>
          </div>
          <Review/>
        </p>
      </main>
  );
}

export default App;

//src/app.js

从上述代码你可以看出我们引入了 Review 卡片组件，也是本案例的核心，稍后我会介绍到。

四、设计本地数据结构

展示信息，需要有相关的数据，本案例将用本地文件数据。本地的数据结构比较简单，一个数组对象，包含 id、name（姓名）、job（岗位）、image（头像）、text（介绍），接下来我们新建一个 data.js 的文件，定义 reviews 对象变量，代码示例如下：

const reviews = [
  {
    id: 1,
    name: 'susan smith',
    job: 'web developer',
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg',
    text:
      "I'm baby meggings twee health goth +1. Bicycle rights tum