Next.js中选择不同稀有度时如何动态修改对应元素样式

首先先避坑：

• 不要直接在JSX模板内直接调用RandomQuality()、RandomRarity()函数，React/Next.js 每次组件重渲染都会重新执行随机函数，导致稀有度值意外跳变，页面初始化时生成一次值即可。

核心实现思路 #

用配置映射表把稀有度等级和对应样式做绑定，后续新增/修改稀有度样式只需要改映射表，不用动渲染逻辑，维护成本最低。

第一步：定义样式映射规则 #

根据你游戏里的稀有度分级，直接定义颜色/类名映射：

// 稀有度-颜色映射，可根据你的业务需求调整色值
const rarityColorMap = {
  common: "#9ca3af", // 普通 灰色
  uncommon: "#22c55e", // 优秀 绿色
  rare: "#3b82f6", // 稀有 蓝色
  epic: "#a855f7", // 史诗 紫色
  legendary: "#f97316", // 传说 橙色
  mythic: "#ef4444", // 神话 红色
};

// Quality等级的颜色映射逻辑完全一致，自行对应等级配置即可
const qualityColorMap = {
  normal: "#9ca3af",
  good: "#22c55e",
  perfect: "#eab308",
};

第二步：初始化时生成一次随机值 #

根据你用的是服务端组件还是客户端组件，选对应写法：

服务端组件（App Router 默认，无交互逻辑推荐用）

直接在组件顶层调用随机函数存值，服务端渲染时只会执行一次：

// app/game/page.jsx 不需要加'use client'
export default function GamePage() {
  // 页面加载时生成一次随机值，不会重复触发
  const currentQuality = RandomQuality();
  const currentRarity = RandomRarity();

  return (
    <div className="p-8">
      <h1 style={{ color: qualityColorMap[currentQuality] ?? "#fff" }}>
        Quality = {currentQuality}
      </h1>
      <h1 style={{ color: rarityColorMap[currentRarity] ?? "#fff" }}>
        Rarity = {currentRarity}
      </h1>
    </div>
  );
}

代码里的?? "#fff"是兜底逻辑，避免随机值不在映射表时出现文字颜色丢失的问题。

客户端组件（有交互、状态逻辑时用）

用useMemo缓存随机结果，保证仅组件初始化时生成一次，不会因为重渲染重新随机：

'use client'
import { useMemo } from "react";

export default function GamePage() {
  const currentQuality = useMemo(() => RandomQuality(), []);
  const currentRarity = useMemo(() => RandomRarity(), []);

  return (
    <div className="p-8">
      <h1 style={{ color: qualityColorMap[currentQuality] ?? "#fff" }}>
        Quality = {currentQuality}
      </h1>
      <h1 style={{ color: rarityColorMap[currentRarity] ?? "#fff" }}>
        Rarity = {currentRarity}
      </h1>
    </div>
  );
}

扩展：实现发光、渐变等复杂样式 #

如果要做高稀有度的文字发光、渐变效果，推荐用类名映射，配合CSS/Tailwind写样式更灵活：

// 稀有度对应Tailwind类名映射，可自定义发光、渐变效果
const rarityClassMap = {
  common: "text-gray-400",
  uncommon: "text-green-500",
  rare: "text-blue-500",
  epic: "text-purple-500 drop-shadow-[0_0_8px_rgba(168,85,247,0.8)]",
  legendary: "text-orange-500 drop-shadow-[0_0_8px_rgba(249,115,22,0.8)]",
  mythic: "text-red-500 drop-shadow-[0_0_12px_rgba(239,68,68,0.9)]",
};

// 使用时直接绑定className即可
<h1 className={rarityClassMap[currentRarity] ?? "text-white"}>
  Rarity = {currentRarity}
</h1>

如果不用Tailwind，写普通CSS类名替换映射值就行，逻辑完全一致。

内容的提问来源于stack exchange，提问作者FSCYT