在 React 中创建样式数组

Question

出于某些原因，我需要创建一个不同样式的数组，以便最终在特定时间使用。不管我有这几段代码...

export const carouselData = {
    cdata: [{
        bgimage: require('Assets/img/Banners/mybanner1.jpg')
    },{
        bgimage: require('Assets/img/Banners/mybanner2.jpg'),
    }]
}

。

var mySectionStyle
this.props.cdata.cdata.map((carouselData, key) => (
    mySectionStyle[key] = {
        backgroundImage: "url(" + carouselData.bgimage + ")"
    }
))
return (
    { this.props.cdata.cdata.map((carouselData, key) => (
        <div className="bg_image" style={ sectionStyle[key] }>
            //Some stuff here
        </div>
    ))}
)

现在，对于任何在编码方面半体面的人来说，可能会看到这段代码的巨大问题，但作为新手，我需要帮助完成它(或重写(。

任何人都可以帮我创建一个数组，这样我就可以用mySectionStyle[0], mySectionStyle[1], mySectionStyle[2]等逐个访问我的样式

编辑。我有一个包含许多图像的数组，我希望这些图像在一个数组中，以便我可以使用不同的背景图像设置轮播。

Answer 1

为什么你不能只做：

var mySectionStyle = {
    style1: {
        margin: 0,
    },
    style2: {
        margin: 10,
    },
}
const style1 = mySectionStyle['style1'];
const style2 = mySectionStyle['style2'];

如果以后在数组中需要它，可以使用 Object 方法对其进行转换。

const availableStyles = Object.keys(mySectionStyle); // ['style1', 'style2']
availableStyles.forEach(style => mySectionStyle[style].backgroundImage = `url(${carouselData.bgimage})`;);

另请参阅 Object.values 和 Object.entries 以了解其他转换为数组选项的信息。