Css 如何分别更改每个数组元素的样式？

如何为每个音符设置不同的背景色

export default class Note extends React.Component { render() {
return (
  <View key={this.props.keyval} style = {[styles.note , this.props.notecolor]} > 
  <ScrollView>
     <Text style ={styles.text} >{ this.props.val.note}</Text>
  </ScrollView>
  <View style ={styles.datte}>
     <Text style ={styles.date}>{ this.props.val.date}</Text>
  </View></View>
);}}

我设置了一些按钮来更改值，但问题是，当我添加第二个音符时，第一个音符也会获得相同的bk颜色，其他音符也会获得相同的背景颜色，这取决于添加的最后一个音符

 let notes = this.state.noteArray.map((val, key) => {
  return (
    <Note key={key} keyval={key} val={val} notecolor={this.state.notecolor} />
  );
});

let notes=this.state.noteArray.map（（val，key）=>{
返回(
);
});

---

任何帮助

如果使用

this.state.notecolor

保留颜色，则更新状态时，整个页面将重新呈现。这就是为什么每个

注释都有相同的背景色。


这里有两个不同的技巧来实现你想要实现的目标

选项1

将
notecolor
存储为
note
对象在
noteArray
中的属性。比如说,


类MainApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
noteArray：[
{
注意：“你好，世界！”，
日期：“2019-01-01”，
注颜色：“橙色”，
}, 
{
注：“你好！”，
日期：“2019-01-01”，
注颜色：“绿色”，
}
]
};
}
render（）{
{
this.state.noteArray.map（（val，key）=>{
返回(
);
});
}
}
开关颜色=（颜色，键）=>{
var noteArray={this.state}；
noteArray[键][“notecolor”]=颜色；
这是我的国家({
记事本数组
})
}
}

要在
note
上使用switchColor，您只需这样称呼它

this.props.switchColor（newColor，this.props.key）；



选项2

将
notecolor
存储在单独的数组中。**如果你不介意额外的属性，选项1是一个更干净的方法

noteArray=[
{
注意：“你好，世界！”，
日期：“2019-01-01”，
}, 
{
注：“你好！”，
日期：“2019-01-01”，
}
];
noteColorArray=[“orage”，“绿色”]；

改变颜色

switchColor=（颜色，键）=>{
var noteColorArray={this.state}；
noteArray[键]=颜色；
这是我的国家({
noteColorArray
})
}



最后

呈现你的笔记

let notes=this.state.noteArray.map（（val，key）=>{
返回(
//或者，取决于您选择的选项
);
});
如果使用
this.state.notecolor
保留颜色，则更新状态时，整个页面将重新呈现。这就是为什么每个
注释都有相同的背景色。


这里有两个不同的技巧来实现你想要实现的目标

选项1

将
notecolor
存储为
note
对象在
noteArray
中的属性。比如说,


类MainApp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
noteArray：[
{
注意：“你好，世界！”，
日期：“2019-01-01”，
注颜色：“橙色”，
}, 
{
注：“你好！”，
日期：“2019-01-01”，
注颜色：“绿色”，
}
]
};
}
render（）{
{
this.state.noteArray.map（（val，key）=>{
返回(
);
});
}
}
开关颜色=（颜色，键）=>{
var noteArray={this.state}；
noteArray[键][“notecolor”]=颜色；
这是我的国家({
记事本数组
})
}
}

要在
note
上使用switchColor，您只需这样称呼它

this.props.switchColor（newColor，this.props.key）；



选项2

将
notecolor
存储在单独的数组中。**如果你不介意额外的属性，选项1是一个更干净的方法

noteArray=[
{
注意：“你好，世界！”，
日期：“2019-01-01”，
}, 
{
注：“你好！”，
日期：“2019-01-01”，
}
];
noteColorArray=[“orage”，“绿色”]；

改变颜色

switchColor=（颜色，键）=>{
var noteColorArray={this.state}；
noteArray[键]=颜色；
这是我的国家({
noteColorArray
})
}



最后

呈现你的笔记

let notes=this.state.noteArray.map（（val，key）=>{
返回(
//或者，取决于您选择的选项
);
});
您需要显示正在使用便笺的组件。它是一个便笺数组，在滚动视图中。您需要显示正在使用便笺的组件。它是一个便笺数组，在滚动视图中。功能开关颜色我应该将其添加到便笺文件或主应用程序中？您需要在
便笺上添加功能。
文件你已经把它整理好了吗？但是它叫什么名字呢？我不应该添加这个.props.color吗？对不起，我不知道为什么我之前告诉过你要在
note
中添加这个函数，哈哈。你需要将它添加到主应用程序上，即打开
noteArray
的文件中。如果你想在
note
中使用它，将函数作为道具传递
我真的很困惑，你能帮我吗？我不知道如何将notecolor添加到“note”中，以及如何将函数传递给它。功能开关颜色我应该将其添加到note文件或主应用程序中？你需要在
note
文件中添加函数。你已经把它整理好了吗？但是它叫什么名字呢？我不应该添加这个.props.color吗？对不起，我不知道为什么我之前告诉过你要在
note
中添加这个函数，哈哈。你需要将它添加到主应用程序上，即打开
noteArray
的文件中。如果您想在
注释中使用它，请将函数作为道具传递
，我真的很困惑，请您帮助我，我不知道如何将notecolor添加到“注释”中，以及如何将函数传递给它
 let notes = this.state.noteArray.map((val, key) => {
  return (
    <Note key={key} keyval={key} val={val} notecolor={this.state.notecolor} />
  );
});