将含PHP混编的HTML/CSS站点转为React+PHP的问题

分后端接口开发和前端React渲染两部分实现，完全匹配原PHP代码的功能：

1. 后端PHP接口（返回JSON格式数据） #

新建一个独立的PHP文件（比如get-topics.php），负责从数据库查询数据并转换为JSON返回：

<?php
// 设置响应头为JSON格式，确保前端能正确解析
header('Content-Type: application/json');

// 数据库连接逻辑
$conn = mysqli_connect("localhost", "root", "", "forum_topics") or die(json_encode(['error' => mysqli_error()]));
$sql = "SELECT * FROM topics";
$records = mysqli_query($conn, $sql);

// 将查询结果转为关联数组
$topics = [];
while ($row = mysqli_fetch_array($records, MYSQLI_ASSOC)) {
    $topics[] = $row;
}

// 输出JSON数据并关闭连接
echo json_encode($topics);
mysqli_close($conn);
?>

2. 前端React组件（请求数据并渲染UI） #

编写React组件，通过fetch()请求后端接口，拿到数据后循环渲染与原代码一致的页面结构：

import { useState, useEffect } from 'react';

function TopicList() {
    const [topics, setTopics] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    // 组件挂载时请求数据
    useEffect(() => {
        fetch('/get-topics.php')
            .then(response => {
                if (!response.ok) throw new Error('数据请求失败');
                return response.json();
            })
            .then(data => {
                setTopics(data);
                setLoading(false);
            })
            .catch(err => {
                setError(err.message);
                setLoading(false);
            });
    }, []);

    // 加载/错误状态处理
    if (loading) return <div>加载中...</div>;
    if (error) return <div>错误：{error}</div>;

    // 对应原PHP代码的渲染逻辑
    return (
        <div className='post'>
            {topics.map(topic => (
                <a 
                    key={topic.topic_id} 
                    className='none' 
                    href={`/topic.php?id=${topic.topic_id}`}
                >
                    {/* 原代码中$filename未定义，这里假设用topic_id生成详情页链接，可按需调整 */}
                    <div className='display'>
                        <p>Posted by ❚ {topic.topic_poster}</p>
                        <p><strong>#</strong> ❚ {topic.topic_rel}</p>
                        <img 
                            src={`images/${topic.topic_photo}`} 
                            alt={`Topic posted by ${topic.topic_poster}`} 
                        />
                        <div className='smalltext'>
                            <p>{topic.topic_post}</p>
                        </div>
                    </div>
                </a>
            ))}
        </div>
    );
}

export default TopicList;

关键细节说明 #

• 后端用mysqli_fetch_array($records, MYSQLI_ASSOC)生成关联数组，经json_encode转换后，前端可直接通过字段名（如topic_poster）访问数据
• React中用map()循环渲染列表，必须为每个列表项添加唯一key（示例用topic_id，需确保数据库中该字段唯一）
• 原PHP代码中的$filename未定义，示例中默认用topic_id生成详情页链接，可根据实际业务调整href属性
• 新增了加载状态和错误处理，比原PHP混编代码的用户体验更完善

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