当前位置：首页 > news >正文

Three.js + React 实战系列 - 客户评价区细解教程 Clients 组件✨（回答式评价 + 评分星级）

news 来源：原创 2025/5/6 13:02:25

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！

在这篇博客中，我们将实现一个简洁的 Hear from My Clients 客户评价区域。这个区块在个人主页中可以突显用户体验和专业度，帮助网页创建信任感和个人品牌形象。

React + ThreeJS 个人主页小项目：🎥 06 · 客户评价区细解教程 Clients 组件✨（回答式评价 + 评分星级）

🌟 项目特性概览

简洁且有调性，给予完整的星级评分表示，增强专业度
应用 Tailwind CSS 快速实现回答式 UI 布局
信息条目数据化驱动，方便扩展

📂 数据来源

所有评价条目从 constants/index.js 中 clientReviews 常量数组动态渲染，如：

{id: 1,name: 'Emily Johnson',position: 'Marketing Director at GreenLeaf',img: 'assets/review1.png',review:'Working with Adrian was a fantastic experience. He transformed our outdated website into a modern, user-friendly platform. His attention to detail and commitment to quality are unmatched. Highly recommend him for any web dev projects.',}

✏️ JSX 格式解析

所有客户评价项通过 map 形成。每条评论包括三大块内容：评论内容、用户信息、星级评分：

{clientReviews.map(({id, name, review, img, position}) => (<div key={id} className='client-review'><p className='text-white font-light'>{review}</p><div className='client-content'><div className='flex gap-3'><img src={img} alt={name} className='w-12 h-12 rounded-full' /><div className='flex flex-col'><p className='font-semibold text-white-800'>{name}</p><p className='to-white-500 md:text-base text-sm'>{position}</p></div></div><div className='flex self-end items-center gap-2'>{Array.from({length: 5}).map((_, index) => (<img key={index} src='/assets/star.png' alt='star' className='w-5 h-5' />))}</div></div></div>
))}

每条评价都包括：

评价文本
客户头像 + 姓名 + 职位
绝对 5 颗星级图标表示

🖊️ 样式解析

为了保持统一的风格，我们进一步封装了 Tailwind 样式类名：

.client-container 应该是一个按响应列表布局，展示所有客户评价
.client-review：单条评价样式，包括背景、圆角和防红背
.client-content：用于格式化用户头像+信息和星级应符层

例如：

<section className='c-space my-20'><h3 className='head-text'>Hear from My Clients</h3><div className='client-container'><!-- 多条评价项格式 --></div>
</section>

📍 `Clients.jsx`全部代码

import React from 'react'
import { clientReviews } from '../constants'const Clients = () => {return (<section className='c-space my-20'><h3 className='head-text'>Hear from My Clients</h3><div className='client-container'>{clientReviews.map(({id, name, review, img, position}) => (<div key={id} className='client-review'><div><p className='text-white font-light'>{review}</p><div className='client-content'><div className='flex gap-3 '><img src={img} alt={name} className='w-12 h-12 rounded-full' /><div className='flex flex-col'><p className='font-semibold text-white-800'>{name}</p><p className='to-white-500 md:text-base text-sm'>{position}</p></div></div><div className='flex self-end items-center gap-2'>{Array.from({length: 5}).map((_, index) => (<img key={index} src='/assets/star.png' alt='star' className='w-5 h-5' />))}</div></div></div></div>))}</div></section>)
}export default Clients