React从独立文件向组件传数组时图片引入的语法错误解决

你的ESLint解析错误是因为JavaScript对象的键值对必须用冒号:分隔，而非等号=，代码里的属性赋值写法不符合语法规范，导致解析失败。

正确的数组写法 #

修改CardData的对象属性写法，把所有=替换为:即可：

const CardData = [
    {
        imgsrc: require('../../../pictures/yellow.jpg'),
        title: "Hello World",
        details: "Card Details"
    }
];

可选的图片导入方式 #

如果你的项目支持ES模块导入（比如Create React App默认支持），可以提前导入图片再赋值，代码可读性更好：

// 先导入图片资源
import yellowImg from '../../../pictures/yellow.jpg';

const CardData = [
    {
        imgsrc: yellowImg,
        title: "Hello World",
        details: "Card Details"
    }
];

在组件中使用该数组 #

假设你要渲染卡片列表，直接遍历CardData即可：

// 导入定义好的数组
import CardData from './path-to-your-CardData-file';

function CardList() {
  return (
    <div className="card-list">
      {CardData.map((card, idx) => (
        <div key={idx} className="card-item">
          <img src={card.imgsrc} alt={card.title} />
          <h2>{card.title}</h2>
          <p>{card.details}</p>
        </div>
      ))}
    </div>
  );
}

export default CardList;

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