如何从React应用（app.js）向静态HTML文件传递数据？

以下是几种实用的实现方案，根据你的场景选择即可：

1. URL参数传递 #

适合传递少量非敏感数据，通过跳转时拼接URL参数，静态HTML解析URL获取数据。

React端代码示例： #

import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 收集表单数据
    const formData = {
      name: e.target.name.value,
      email: e.target.email.value
    };
    // 转换为URL查询参数
    const queryParams = new URLSearchParams(formData).toString();
    // 跳转到静态HTML页面并携带参数
    navigate(`/static-page.html?${queryParams}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="姓名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <button type="submit">提交并跳转</button>
    </form>
  );
}

静态HTML端代码示例： #

<!DOCTYPE html>
<html>
<head>
  <title>静态页面</title>
</head>
<body>
  <h2>收到的数据：</h2>
  <p>姓名：<span id="name"></span></p>
  <p>邮箱：<span id="email"></span></p>

  <script>
    // 解析URL中的查询参数
    const params = new URLSearchParams(window.location.search);
    // 获取参数值并渲染到页面
    document.getElementById('name').textContent = params.get('name') || '无';
    document.getElementById('email').textContent = params.get('email') || '无';
  </script>
</body>
</html>

2. 本地存储（localStorage/sessionStorage） #

适合需要临时存储数据的场景，React将数据存入本地存储，静态HTML加载时读取。

React端代码示例： #

function App() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      name: e.target.name.value,
      email: e.target.email.value
    };
    // 将数据转为JSON字符串存入localStorage
    localStorage.setItem('submittedFormData', JSON.stringify(formData));
    // 跳转到静态HTML页面
    window.location.href = '/static-page.html';
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="姓名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <button type="submit">提交并跳转</button>
    </form>
  );
}

静态HTML端代码示例： #

<!DOCTYPE html>
<html>
<head>
  <title>静态页面</title>
</head>
<body>
  <h2>收到的数据：</h2>
  <p>姓名：<span id="name"></span></p>
  <p>邮箱：<span id="email"></span></p>

  <script>
    // 从localStorage读取数据
    const storedData = localStorage.getItem('submittedFormData');
    if (storedData) {
      const formData = JSON.parse(storedData);
      document.getElementById('name').textContent = formData.name;
      document.getElementById('email').textContent = formData.email;
      // 可选：读取后删除数据，避免残留
      localStorage.removeItem('submittedFormData');
    }
  </script>
</body>
</html>

3. iframe跨页面通信（嵌入场景） #

如果静态HTML是作为iframe嵌入到React应用中的，可通过postMessage实现双向通信。

React端代码示例： #

import { useRef, useEffect } from 'react';

function App() {
  const iframeRef = useRef(null);
  // 模拟表单数据
  const formData = { name: '张三', email: 'zhangsan@example.com' };

  useEffect(() => {
    // 等待iframe加载完成后发送消息
    const sendData = () => {
      iframeRef.current?.contentWindow.postMessage(formData, '*');
    };
    if (iframeRef.current) {
      if (iframeRef.current.contentWindow) {
        sendData();
      } else {
        iframeRef.current.addEventListener('load', sendData);
      }
    }
    return () => {
      iframeRef.current?.removeEventListener('load', sendData);
    };
  }, [formData]);

  return (
    <div>
      <h2>React主页面</h2>
      <iframe 
        ref={iframeRef} 
        src="/static-page.html" 
        width="800" 
        height="400" 
        title="静态页面"
      ></iframe>
    </div>
  );
}

静态HTML端代码示例： #

<!DOCTYPE html>
<html>
<head>
  <title>静态页面</title>
</head>
<body>
  <h2>收到的数据：</h2>
  <p>姓名：<span id="name"></span></p>
  <p>邮箱：<span id="email"></span></p>

  <script>
    // 监听来自React主页面的消息
    window.addEventListener('message', (event) => {
      // 可选：验证消息来源，提升安全性
      // if (event.origin !== 'https://your-react-app-domain.com') return;
      
      const formData = event.data;
      document.getElementById('name').textContent = formData.name;
      document.getElementById('email').textContent = formData.email;
    });
  </script>
</body>
</html>

4. 服务器中转（有后端场景） #

如果你的项目有后端服务，可通过后端存储数据，静态HTML从后端接口获取数据，适合敏感数据或需要持久化的场景。

React端代码示例： #

import axios from 'axios';

function App() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = {
      name: e.target.name.value,
      email: e.target.email.value
    };
    // 将数据提交到后端接口
    try {
      await axios.post('/api/save-form-data', formData);
      // 跳转到静态HTML页面
      window.location.href = '/static-page.html';
    } catch (error) {
      console.error('提交失败:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="姓名" required />
      <input type="email" name="email" placeholder="邮箱" required />
      <button type="submit">提交并跳转</button>
    </form>
  );
}

静态HTML端代码示例： #

<!DOCTYPE html>
<html>
<head>
  <title>静态页面</title>
</head>
<body>
  <h2>收到的数据：</h2>
  <p>姓名：<span id="name"></span></p>
  <p>邮箱：<span id="email"></span></p>

  <script>
    // 从后端接口获取数据
    async function fetchData() {
      try {
        const response = await fetch('/api/get-form-data');
        const formData = await response.json();
        document.getElementById('name').textContent = formData.name;
        document.getElementById('email').textContent = formData.email;
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    }
    // 页面加载时执行
    window.onload = fetchData;
  </script>
</body>
</html>

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