React新手实现随机幸运签跳转功能时出现白屏问题如何解决？

你当前的代码混淆了原生HTML/JS语法和React框架的开发规范，完全不符合React组件的书写要求，这是页面空白的核心原因，具体问题如下：

• 你导入了React但没有定义合法的React组件结构，直接在代码里写<body>标签属于语法错误，React组件只能返回JSX元素，不能直接声明全局的body标签
• 你编写的getFortune函数没有被触发调用，哪怕DOM能正常渲染，也不会执行随机幸运签的逻辑
• React不推荐直接使用document.getElementById、innerHTML这类原生DOM操作，应该用React自带的状态（state）管理展示内容

修正后的完整React组件代码 #

import React, { useState, useEffect } from "react";
// 请替换为你自己的fade-animation动画对应的CSS文件路径
import "./你的样式文件路径.css";

const fortunesArray = [
  "前方有令人兴奋的机遇等着你",
  "未来一周一位老朋友会给你带来明智的建议",
  "你会在意想不到的地方收获好运",
  "别轻易放弃…当然要是你真想放弃也没毛病",
  "111",
  "222",
  "333",
  "444",
  "也许你现在需要的只是睡一小会",
  "别给前任发消息！"
];

export default function FortunePage() {
  // 用state管理当前展示的幸运签内容
  const [fortune, setFortune] = useState("What is your fortune?");
  // 用state控制动画触发
  const [animate, setAnimate] = useState(true);

  function getFortune() {
    const randomFortune = fortunesArray[Math.floor(Math.random() * fortunesArray.length)];
    // 先移除动画类名
    setAnimate(false);
    // 等DOM更新后修改内容再重新添加动画类名，实现动画重新播放效果
    setTimeout(() => {
      setFortune(randomFortune);
      setAnimate(true);
    }, 10);
  }

  // 页面加载完成后自动触发一次随机幸运签
  useEffect(() => {
    getFortune();
  }, []);

  return (
    <h1 
      id="cookie" 
      className={animate ? "fade-animation" : ""}
    >
      {fortune}
    </h1>
  );
}

额外注意事项 #

• 确保你已经配置了React路由，首页点击跳转的目标路径对应了上面这个幸运签页面组件
• 你自己编写的fade-animation动画对应的CSS样式要正确引入到组件中，否则不会有淡入效果
• 如果需要点击页面重新生成幸运签，可以给h1或者其他页面元素添加onClick={getFortune}绑定点击事件

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