React中利用map函数动态渲染背景图片的正确姿势与常见陷阱

const featured = [
  {
    designation: 'Author',
    backgroundImage: 'images/img_1.jpg',
    title: 'This is the first featured-post',
  },
  {
    designation: 'member board of editors',
    backgroundImage: 'images/img_2.jpg',
    title: 'This is the second featured-post',
  },
  {
    designation: 'Member',
    backgroundImage: 'images/img_3.jpg',
    title: 'This is the third featured-post',
  }
];

// 错误示例：将map结果应用于单个元素
import React from 'react';
import featured from '../pages/featured_news'; // 假设这是数据源

const SlidesIncorrect = () => {
  // 这里的featImg会是一个图片路径的数组：['images/img_1.jpg', 'images/img_2.jpg', 'images/img_3.jpg']
  const featImg = featured.map((feat) => feat.backgroundImage);

  return (
    <div
      className="flex"
      style={{
        // 错误：将数组直接传入url()，会被隐式转换为逗号分隔的字符串
        backgroundImage: `url(${featImg})`, 
        height: '300px',
        backgroundSize: 'cover',
        backgroundColor: 'green',
        backgroundRepeat: 'no-repeat'
      }}
    ></div>
  );
};

export default SlidesIncorrect;

// 正确示例：为每个数据项生成一个独立的元素
import React from 'react';
import featured from '../pages/featured_news'; // 假设这是数据源

const SlidesCorrect = () => {
  return (
    // 最佳实践：当map返回多个根元素时，用一个父元素包裹
    <div className="slides-wrapper"> 
      {featured.map((feat, index) => { // 推荐提供key属性
        return (
          <div
            key={index} // 重要：为列表中的每个元素提供一个唯一的key
            className="flex slide-item" // 可以添加更多样式类
            style={{
              backgroundImage: `url(${feat.backgroundImage})`, // 正确：每个div使用各自的背景图片路径
              height: '300px',
              backgroundSize: 'cover',
              backgroundColor: 'green',
              backgroundRepeat: 'no-repeat'
            }}
          >
            {/* 可以在这里添加其他内容，例如标题、描述等 */}
            <h3>{feat.title}</h3>
            <p>{feat.designation}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1624">
                            <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d995a3e16812.png" alt="NameGPT">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1624">NameGPT</a>
                            <p>免费的名称生成器，AI驱动在线生成企业名称及Logo</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="NameGPT">
                                <span>119</span>
                            </div>
                        </div>
                        <a href="/ai/1624" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="NameGPT">
                        </a>
                    </div>
                
          </div>
        );  
      })}
    </div>
  );
};

export default SlidesCorrect;