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

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

在这篇博客中，我们将实现一个简洁的 Hear from My 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

🔠 下一篇预告：工作技能展示区域 + 任务模型制作 + 动作绑定

我们将在下一节中：

• 🌟 构建个人工作技能区域（Work）
• ✨ 将带你制作个人3D形象以及，为之搭配不同的动作，将所有动作与模型绑定
• ⛳️ 实现鼠标移动不同技能标签，模型展示对应动作

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