React Js內聯樣式不適用於循環條件

Question

我在 React JS 中做循環時遇到問題。 我想根據我創建的數據為每個項目制作不同的背景。 我嘗試使用內聯樣式使其動態化，但它不起作用。 對此有何建議或解決方案？

        {
            main.map((item, index) => (
                <a key={index} href='#' className="col-12 main-item-img" style={{backgroundImage: `url(${item.bg})`, backgroundPosition: 'center', backgroundSize: 'cover'}}>
                    <h2>{item.name}</h2>
                    <img src={item.logo} className='item-img' alt={item.region} srcSet="" />
                    <p>{item.desc}</p>
                    <div className="overlay"></div>
                </a>
            ))
        }

Answer 1

解決了！ 問題不在循環中，而是在我使用的光滑的 slider 中。 在描述中我沒有解釋我使用的是光滑的 slider 因為我認為問題出在循環中。

我只需要在之前添加。 結果是這樣的

    <Slider {...carouselSettings} style={{ width: '100%' }}>
        {
            main.map((item, index) => (
                <div> //add this element
                    <a key={index} href='#' className="col-12 main-item-img" style={{backgroundImage: `url(${item.bg})`, backgroundPosition: 'center', backgroundSize: 'cover'}}>
                        <h2>{item.name}</h2>
                        <img src={item.logo} className='item-img' alt={item.region} srcSet="" />
                        <p>{item.desc}</p>
                        <div className="overlay"></div>
                    </a>
                </div>
            ))
        }
    </Slider>