在 React 中创建样式数组答案

【问题标题】：Creating an array of styles in React在 React 中创建样式数组
【发布时间】：2019-11-23 16:54:57
【问题描述】：

出于某些原因，我需要创建一系列不同的样式，以便最终在某些时候使用。不管我有这段代码...

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] 等逐一访问我的样式

编辑。我有一个包含许多图像的数组，我想要数组中的图像，这样我就可以使用不同的背景图像设置轮播。

【问题讨论】：

对不起，我不明白你想要完成什么。你能提供一个你目前拥有的数据的例子吗？或者，您希望如何使用样式列表？
抱歉，我添加了更多信息。我只想使用数组访问多种不同的样式，因此当我查看所有轮播横幅时，我可以为它们分配不同的背景图像。我希望这是有道理的。

标签： arrays reactjs styles

【解决方案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 以了解其他转换为数组的选项。

【讨论】：