如何创建可导入静态内容的React组件？解决动态import异步问题

你可以通过React状态钩子+副作用钩子处理异步加载逻辑，避免把组件写成async函数。核心思路是用useState管理加载状态和代码内容，用useEffect触发异步加载并更新状态。

下面是修改后的可行代码：

import React, { useState, useEffect } from 'react';
import CodeBlock from '@theme/CodeBlock';

export function MyCode({ fileName }) {
  // 初始化状态：存储代码文本、加载状态、错误信息
  const [code, setCode] = useState('');
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 每次fileName变化时重新加载
    const loadCode = async () => {
      try {
        setIsLoading(true);
        // 异步加载raw文件，提取default内容
        const module = await import(`!!raw-loader!@site/static/${fileName}`);
        setCode(module.default);
        setError(null);
      } catch (err) {
        setError(`加载文件失败：${err.message}`);
        setCode('');
      } finally {
        setIsLoading(false);
      }
    };

    loadCode();
  }, [fileName]); // 依赖fileName，props变化时重新执行

  // 根据状态渲染不同内容
  if (isLoading) {
    return <div>加载代码中...</div>;
  }

  if (error) {
    return <div className="text-red-500">{error}</div>;
  }

  return <CodeBlock>{code}</CodeBlock>;
}

关键说明： #

• 把异步操作封装在useEffect内部的async函数中，避免组件本身成为async函数
• 通过useState维护加载中、加载完成、加载失败三种状态，给用户明确的反馈
• raw-loader加载的内容会放在模块的default属性里，需要正确提取
• 将fileName设为useEffect的依赖项，确保文件名变化时自动重新加载对应文件

内容的提问来源于stack exchange，提问作者Cigarette Smoking Man