如何在React+TailwindCSS项目中用Math.random()实现随机文本展示

错误原因梳理 #

你原来的代码存在以下几个核心问题导致无法编译运行：

• 不能在React组件return输出的JSX结构里直接写原生JS逻辑，JS逻辑要么放在return语句之前，要么用{}包裹后嵌入到JSX中
• React不推荐使用document.write操作DOM，应该直接通过变量/状态渲染内容
• React中指定CSS类名需要用className属性，不能用原生HTML的class
• 缺少组件必要的标签闭合、导出等标准结构

基础实现方案 #

该方案可以实现每次页面加载/组件刷新时随机展示一条文本，完整App.js代码如下：

import './App.css';

function App() {
  // 随机文本计算逻辑放在return之前执行
  const r_text = [
    "\"This is a test\"",
    "\"This is another\"",
    "\"This is a test\"",
    "\"This is another\""
  ];
  const randomIndex = Math.floor(r_text.length * Math.random());
  const randomText = r_text[randomIndex];

  return (
    <div className="container mx-auto">
      <div className="max-w-md mx-auto bg-white text-center text-6xl m-10 overflow-hidden md:max-w-2xl">
        site title
      </div>
      {/* 直接嵌入变量渲染随机文本，用Tailwind的text-center替代废弃的center标签 */}
      <div className="text-center">
        {randomText}
      </div>
    </div>
  );
}

export default App;

固定首次加载结果方案 #

如果需要保证随机文本仅在页面首次加载时生成一次，组件后续重渲染时不会变更，可以用useMemo缓存计算结果：

import { useMemo } from 'react';
import './App.css';

function App() {
  const randomText = useMemo(() => {
    const r_text = [
      "\"This is a test\"",
      "\"This is another\"",
      "\"This is a test\"",
      "\"This is another\""
    ];
    const randomIndex = Math.floor(r_text.length * Math.random());
    return r_text[randomIndex];
  }, []); // 空依赖数组保证仅在组件首次挂载时计算一次

  return (
    <div className="container mx-auto">
      <div className="max-w-md mx-auto bg-white text-center text-6xl m-10 overflow-hidden md:max-w-2xl">
        site title
      </div>
      <div className="text-center">
        {randomText}
      </div>
    </div>
  );
}

export default App;

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