React+WAMP本地全栈开发：如何在JSX中调用PHP文件？

首先得明确一个核心点：你不能在React的JSX/JS文件里直接用require()或import导入PHP文件。React是前端JavaScript代码，运行在浏览器中；而PHP是后端脚本，必须由WAMP的Apache服务器解析执行，两者完全不在同一个运行环境里。正确的做法是通过HTTP请求（AJAX/fetch/axios）调用WAMP上运行的PHP接口，由PHP去处理MySQL查询并返回结果。

下面是具体的分步解决方案：

1. 解决跨域请求问题 #

因为你的React项目跑在localhost:3002，WAMP跑在localhost:3000，浏览器的同源策略会阻止跨域请求。这里有两种简单的解决方式：

方式一：React开发服务器代理（推荐，无需修改WAMP配置） #

在你的React项目根目录的package.json文件中，添加一行proxy配置：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:3000", // 新增这一行
  // ... 其他原有配置
}

添加后重启React开发服务器（npm start），之后React项目中发送的相对路径请求（比如/api/get-data.php），会自动转发到http://localhost:3000/api/get-data.php。

方式二：WAMP Apache配置CORS #

如果不想用React代理，可以修改WAMP的Apache配置来允许跨域请求：

• 找到WAMP安装目录下的httpd.conf文件，确保开启了mod_headers模块（去掉前面的#注释）：

  LoadModule headers_module modules/mod_headers.so
  

• 在WAMP的www目录下创建或修改.htaccess文件，添加以下内容：

  Header set Access-Control-Allow-Origin "http://localhost:3002"
  Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type"
  

这样Apache会允许来自localhost:3002的跨域请求。

2. 编写WAMP端的PHP接口 #

在WAMP的www目录下创建一个接口文件夹（比如api），编写两个PHP文件：

① 数据库连接文件（db.php） #

<?php
// 数据库配置，替换成你自己的数据库信息
$host = 'localhost';
$dbname = 'your_database_name';
$username = 'root'; // WAMP默认MySQL用户名
$password = ''; // WAMP默认MySQL密码为空

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die(json_encode(['error' => '数据库连接失败: ' . $e->getMessage()]));
}
?>

② 数据查询接口（get-data.php） #

<?php
require_once 'db.php';

header('Content-Type: application/json');

try {
    // 示例：查询users表的所有数据，替换成你的业务查询逻辑
    $stmt = $pdo->query("SELECT * FROM users");
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    echo json_encode(['success' => true, 'data' => $data]);
} catch(PDOException $e) {
    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
}
?>

确保你的MySQL数据库中存在对应的表（比如users），并且配置信息正确。可以先在浏览器中访问http://localhost:3000/api/get-data.php，验证是否能返回正常的JSON数据。

3. 在React组件中调用PHP接口 #

现在可以在React组件中用fetch或者axios发送请求获取数据了，这里用fetch举例子：

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [error, setError] = useState('');

  useEffect(() => {
    // 发送请求到PHP接口，因为配置了代理，会自动转发到WAMP的对应路径
    fetch('/api/get-data.php')
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败，请检查接口是否正常');
        }
        return response.json();
      })
      .then(result => {
        if (result.success) {
          setData(result.data);
        } else {
          setError(result.error);
        }
      })
      .catch(err => {
        setError(err.message);
      });
  }, []);

  return (
    <div className="App">
      <h2>从MySQL获取的数据</h2>
      {error && <p style={{color: 'red'}}>{error}</p>}
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name} - {item.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

如果想用axios，先执行npm install axios安装，再替换fetch部分的代码即可，逻辑是一致的。

关键注意事项 #

• 确保WAMP的Apache和MySQL服务已经启动，PHP接口能通过浏览器正常访问。
• 无需将React项目放到WAMP的www目录下，保持两个服务独立运行即可，通过代理或CORS解决跨域问题。
• PHP接口必须设置Content-Type: application/json响应头，这样前端才能正确解析返回的数据。

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