有没有办法单独设置使用 .map() 函数呈现的组件的样式？

Question

我正在使用this.state.notes.map() 为我的this.state.notes 数组中的每个项目呈现一个<Tuner /> 组件。我想知道是否有办法单独设置这些组件的样式。我想将它们单独放置在页面上，但它们都被一起呈现，所以如果我没记错的话，内联样式或类名都不起作用。如何做到这一点？

 this.state = {
  notes: [
    { note: "E", tone: E },
    { note: "A", tone: A },
    { note: "D", tone: D },
    { note: "G", tone: G },
    { note: "B", tone: B },
    { note: "e", tone: e }
  ]}


render() {
 const notes = this.state.notes.map(note => (
  <Tuner
    key={note.note}
    note={note.note}
  />
));

return (
  <div className="App">
    <h1>Online Guitar Tuner</h1>
    {notes}
  </div>
);


}

编辑：我尝试了一些建议的解决方案，但似乎都没有奏效。

对于这个解决方案，样式显示在 React 控制台的渲染组件中，但没有应用实际样式。我想也许我只是在这里遗漏了一些小东西，因为样式存在于组件上但没有被应用。

constructor(props){
  this.noteStyles = {
    E: {
      backgroundColor: "#4caf50",
      border: "none",
      color: "white",
      padding: "15px 32px",
      textAlign: "center",
      textDecoration: "none",
      fontSize: "16px"
    }
  };

 this.state = {
  notes: [
    { note: "E", tone: E },
    { note: "A", tone: A },
    { note: "D", tone: D },
    { note: "G", tone: G },
    { note: "B", tone: B },
    { note: "e", tone: e }
  ]}
}

const notes = this.state.notes.map(note => (
  <Tuner
    key={note.note}
    playSound={e => this.playSound(e)}
    note={note.note}
    styles={this.noteStyles[note.note]}

  />
));

Answer 1

您可以使用预定义样式并使用className 或内联样式but less recommended 生成它们，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import './noteStyles.css';

const notes = [{ note: 'A' }, { note: 'B' }];

const NOTE_STYLE = {
  B: {
    color: 'pink'
  },
  A: {
    color: 'palegreen'
  }
};

const App = () => {
  return (
    <>
      {notes.map(({ note }) => (
        <div className={`noteStyle${note}`} style={NOTE_STYLE[note]}>
          {note}
        </div>
      ))}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

这是一个非常广泛的问题，因为您还没有真正描述过您想要什么样式，但我假设您想做一些简单的事情，比如更改笔记的颜色。您可以采取以下几种方法：

1. 将样式与您的对象一起传递：

this.state = {
  notes: [{
    note: "E",
    tone: E,
    color: "#ff0000",
  }, {
    note: "A",
    tone: A,
    color: "#ff00ff",
  }, {
    note: "D",
    tone: D,
    color: "#ff00aa",
  }, {
    note: "G",
    tone: G,
    color: "#112233",
  }, {
    note: "B",
    tone: B,
    color: "#ff0011",
  }, {
    note: "e",
    tone: e,
    color: "#ff1100",
  }]
}

1. 在函数本身中渲染

render() {
 const notes = this.state.notes.map((note, index) => {
  const colors = [
    "#ff0000",
    "#ff00ff",
    "#ff00aa",
    "#112233",
    "#ff0011",
    "#ff1100",
  ];

  return (
    <Tuner
      key={note.note}
      note={note.note}
      color={colors[index]}
    />
  );
});

1. 使用 CSS

.note:nth-child(1) { color: ... }