javascript - 如何将一个数组中的连续值插入到另一个映射数组中？

Question

我对 Javascript 还很陌生，并且我正在使用的组件遇到问题。

我有一组数据，已成功映射到组件中。我有另一个数组，其中包含我希望作为 Prop 传递的视觉属性。例如，我希望第一个返回为红色，下一个返回为蓝色，最后一个返回为绿色，然后重复该序列。我该怎么做？

我已经解决了这个问题，但你会立即明白为什么我的解决方案不起作用。我明白为什么这不起作用，但我不确定下一步该尝试什么。

有人能指出我正确的方向吗？

const colorsList = ["red", 'blue', "green"]
console.log(colorsList)

const IndustriesPage = ({data}) => (
  <Layout>
        <HeroInternal
          title="Industries"
        />
        <GridBlock>
          {data.allContentfulPageCaseStudy.edges.map(function(target){
            return(
                <TextLinkModule
                  linkTitle = {target.node.industry}
                  titleModifier = 'textLinkModule__title--small'
                  backgroundColor = {colorsList.map(function(target){
                    return(
                       target,
                       console.log(target)
                    )
                  }
                  )}
                  linkDestination = {`industries/${target.node.industry}`.split(' ').join('-').split('&').join('and').toLowerCase()}
                  // backgroundImage = {target.node.linkBackgroundImage.fluid.src}
                /> 
              )
            })
          }
        </GridBlock>
        <ContactUsBlock></ContactUsBlock>
  </Layout>
)

Answer 1

map function返回数组每个成员的值和索引。您可以使用每个边的索引从colorsList数组返回单个值。

data.allContentfulPageCaseStudy.edges.map(function(target, idx){
...
backgroundColor = { colorsList[idx % colorsList.length] }