React组件渲染问题：导入外部JS文件内容后无法显示图片与文本

结合你的代码逻辑，导致图片和文本不显示的核心问题大概率是props传递与访问不匹配，或是图片路径配置错误，以下是具体修复方案：

1. 修复Props访问逻辑（最可能的原因） #

从你的代码结构来看，主文件index.js是把data中的每个对象以item属性传给Card组件，但Card组件直接尝试访问props.img、props.title——这是错误的，因为这些属性都嵌套在props.item对象里。

错误的Card组件代码： #

function Card(props) {
  return (
    <div>
      <img src={props.img} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.desc}</p>
    </div>
  );
}

修复后的Card组件（二选一即可）： #

方案一：解构嵌套的props.item

function Card(props) {
  const { img, title, desc } = props.item;
  return (
    <div>
      <img src={img} alt={title} />
      <h3>{title}</h3>
      <p>{desc}</p>
    </div>
  );
}

方案二：在主文件展开props传递

// index.js中的map渲染部分修改为：
const cards = data.map(item => <Card key={item.id} {...item} />);
// 此时Card组件可以直接访问props.img、props.title，无需嵌套

2. 修复图片路径问题 #

若图片仅显示alt文本，说明图片地址无效，按以下场景处理：

• 图片放在public文件夹下：路径需以斜杠开头，比如/images/reactlogo.svg（对应public/images/reactlogo.svg）。
• 图片放在src文件夹下：需先导入图片再使用，示例：

  // data.js中修改
  import reactLogo from './images/reactlogo.svg';
  
  export default [
    {
      img: reactLogo,
      title: "React",
      desc: "Made with React"
    }
  ];
  

3. 补充：给列表项添加唯一key #

在index.js渲染Card列表时，需给每个Card添加唯一key，避免React警告：

// 优先用数据自带的唯一id，无id时可临时用index（不推荐用于频繁更新的列表）
const cards = data.map((item, index) => <Card key={item.id || index} item={item} />);

按上述步骤修复后，文本和图片即可正常显示。

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