试图了解React的设置状态 - 设置状态并将其应用于单个组件

Question

注意：其App.js组件

我有一个州

state = {

  contacts: [...data is coming from an api],
  bgColors: ["bg-red","bg-blue",...so On]

  // bg colors array consist of class coming from css

}

内部渲染功能 - ＆gt;

我使用this.state.contacts.map显示来自联系人（状态）的数据

在map map函数中有一个带className的div

<div className={`col-sm-3 relative book  ${Here I want to display bgColors String one by one} `}>

Answer 1

只需使用本机Array.join方法生成一个类字符串：

<div className={`col-sm-3 relative book ${this.state.bgColors.join(' ')} `} />