Next.js中遍历字符串字符失效：Span标签无法渲染求助

你犯了三个关键错误： #

• 用了forEach而非map：forEach仅做数组遍历，没有返回值，React拿到的是undefined，自然无法渲染内容。map会返回新数组，React可以直接渲染数组中的JSX元素。
• 返回字符串形式的HTML：React不识别字符串模板生成的标签，必须直接返回JSX元素（即<span>标签本身，而非字符串）。
• 缺少key属性：遍历生成JSX元素时，每个元素需要唯一的key，这是React的强制要求，否则会触发控制台警告。

另外补充：Tailwind的动态类名（比如rotate-[${i*8.1}deg]）在编译阶段无法被识别，所以旋转样式最好用内联style属性实现，确保动态值生效。

修正后的代码 #

export default function Work() {
  const logoText = "The future starts here.";

  return (
    <div className="absolute w-full h-full">
      {logoText.split("").map((character, i) => (
        <span
          key={i}
          className="absolute left-[50%] text-xl origin-[0px_130px]"
          style={{ transform: `rotate(${i * 8.1}deg)` }}
        >
          {character}
        </span>
      ))}
    </div>
  );
}

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