Question

一般来说，我只是从reactJS和编码开始。我目前无法使其工作：

我正在使用.map（）遍历数据，我想提供一个className，该类名会随着从API中获取的数据类型而变化。

这就是为什么我做出一个'if-else'语句的原因，该语句构成了className必须是什么的数组

但是className总是最后一个项目

我的if-else声明

Notification

我的地图

for (let i = 0; i < 10; i++) {
  let Cstyle = []
  if (this.state.results[i].group === 'one') {
    Cstyle = 'one'
  }
  else if (this.state.results[i].group === 'two') {
    Cstyle = 'two'
  }
  else if (this.state.results[i].group === 'three') {
    Cstyle = 'three'
  }
this.setState({style : Cstyle})}

我希望有一个列表，当我从我的API中获得“一个”时，某些项目的类名=“一个”，与“两个”和“三个”相同。

Answer 1

let Cstyle = []

Cstyle从一个数组开始……

 Cstyle = 'one'

…但是在循环中，您反复用字符串覆盖它。

如果要向数组中添加某些内容，请使用其push()方法。不要覆盖它。

Cstyle.push('one');

并在循环之前而不是在循环内部创建数组。

Aside ：惯用JavaScript保留变量名，以大写字母开头，用于构造函数/类。请勿对包含数组或字符串的变量使用该命名约定。

Answer 2

由于Cstyle是数组，因此您要使用字符串变量对其进行重新分配。

您必须在该数组中添加样式，而不是重新分配它。

使用：Cstyle.push（'one'）或Cstyle [i] ='one'在数组内添加值。

  let Cstyle = []
for (let i = 0; i < 10; i++) {

  if(this.state.results[i].group === 'one'){
    Cstyle.push('one');
    }
    else if(this.state.results[i].group === 'two'){
    Cstyle.push('two');
    }
    else if(this.state.results[i].group === 'three'){
    Cstyle.push('three');
}
this.setState({style : Cstyle})}

Answer 3

代替for循环，您可以直接使用组名作为类名

{this.state.results.map((res, index) => ( 
    <div key={index} className={`activity ${res.group}`}>
    <p>res.test</p>
    </div>
))}

Answer 4

您正在循环中初始化数组Cstyle，因此它将永远只包含您放入其中的最后一项。

但是，您要为该数组分配一个字符串值，从而覆盖该数组并因此包含最后一个字符串

ClassName仅从数组中获取最后一项

4 个答案: