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>
);}}

notecolor具有背景颜色属性

 notecolor: { backgroundColor: 'orange' }

我设置了一些按钮来更改值，但是问题是当我添加第二个音符时，第一个音符也获得了相同的bk颜色​​，依此类推，对于其他音符，它们都获得了相同的背景色，具体取决于添加的最后一个音符。

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

任何帮助！

最佳答案

如果使用this.state.notecolor保留颜色，则在更新状态时，将重新渲染整个页面。这就是每个note具有相同背景色的原因。


这是两种您可以尝试实现的技巧。

选项1

将notecolor作为note对象的属性存储在noteArray中。例如，

class MainApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      noteArray : [
        {
          note: "Hello world!",
          date: "2019-01-01",
          notecolor: "orange",
        },
        {
          note: "Hola world!",
          date: "2019-01-01",
          notecolor: "green",
        }
      ]
    };
  }

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

  switchColor = (color, key) => {
    var noteArray = {this.state};
    noteArray[key]["notecolor"] = color;
    this.setState({
      noteArray
    })
  }
}

要在note上使用switchColor，只需像这样调用它

this.props.switchColor(newColor, this.props.key);

选项2

将notecolor存储在单独的阵列上。 **如果您不介意额外的属性，则选择1是更清洁的方法

noteArray = [
  {
    note: "Hello world!",
    date: "2019-01-01",
  },
  {
    note: "Hola world!",
    date: "2019-01-01",
  }
];

noteColorArray = ["orage", "green"];

改变颜色

switchColor = (color, key) => {
  var noteColorArray = {this.state};
  noteArray[key] = color;
  this.setState({
    noteColorArray
  })
}

最后

渲染笔记

let notes = this.state.noteArray.map((val, key) => {
  return (
    <Note key={key} keyval={key} val={val} notecolor={val.notecolor} />
    // OR, depends on which option you choose
    <Note key={key} keyval={key} val={val} notecolor={this.state.noteColorArray[key]} />
  );
});