React中从根目录加载非JSON/图片的经典AJAX异步内容实现方案

基础问题澄清 #

• componentDidMount 已经被Hooks完全替代，React官方不再推荐新代码使用类组件，无需考虑该方案
• useEffect的实现复杂度远低于你的预期，逻辑和你原有原生JS的异步请求逻辑完全对齐，只是适配了React的声明式渲染规则

最简实现方案 #

你原有逻辑的核心是「点击链接更新请求地址→异步拉取PHP返回的HTML→插入到指定容器」，在React中可以通过useState+useEffect+dangerouslySetInnerHTML快速实现，完整示例如下：

import { useState, useEffect } from 'react';

function ProjectModule() {
  // 存储要请求的PHP文件路径，默认可设为第一个项目
  const [requestPath, setRequestPath] = useState('/projekt-1.php');
  // 存储接口返回的HTML字符串
  const [renderHtml, setRenderHtml] = useState('');
  // 可选的加载状态
  const [isLoading, setIsLoading] = useState(false);

  // 监听请求路径变化，自动触发拉取逻辑
  useEffect(() => {
    const fetchPhpContent = async () => {
      setIsLoading(true);
      try {
        const response = await fetch(requestPath);
        const htmlStr = await response.text();
        setRenderHtml(htmlStr);
      } catch (error) {
        setRenderHtml('<p>内容加载失败，请刷新重试</p>');
        console.error('请求错误：', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchPhpContent();
  }, [requestPath]);

  // 链接点击事件，直接更新请求路径即可触发后续逻辑
  const handleProjectClick = (e, index) => {
    e.preventDefault();
    setRequestPath(`/projekt-${index + 1}.php`);
  };

  return (
    <div className="project-container">
      {/* 项目链接区域，无需手动遍历加事件监听，React声明式绑定即可 */}
      <div className="project-links">
        {['项目1', '项目2', '项目3'].map((item, index) => (
          <a 
            href={`/projekt-${index + 1}.php`} 
            key={index}
            onClick={(e) => handleProjectClick(e, index)}
          >
            {item}
          </a>
        ))}
      </div>
      {/* 内容渲染区域，用dangerouslySetInnerHTML插入HTML字符串 */}
      <div id="view" className="content-area">
        {isLoading ? <p>加载中...</p> : <div dangerouslySetInnerHTML={{ __html: renderHtml }} />}
      </div>
    </div>
  );
}

export default ProjectModule;

注意：dangerouslySetInnerHTML 仅可用于你完全信任的HTML内容，若PHP返回的内容包含用户提交的不可信内容，需要提前做XSS过滤避免安全风险

进阶优化建议 #

如果后续需要支持浏览器前进后退、地址栏URL对应不同项目的需求，可以接入React Router：将项目ID作为路由参数，组件内通过useParams拿到ID后发起请求即可，整体逻辑和上述示例差异很小，也更符合单页应用的开发规范。

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