渲染 svgs 并在 React 组件中设置内部 css.this

Question

I have a react component, in which im setting a sequence of notes. I would like to dynamically render an svg for each pitch; in this case, where there are 3 notes, so the would just be 3 svgs.

So, if this in my component:

this.sequence = {
      BEATB: {
      ticksPerQuarter: 360,
      totalTime: 2,
      timeSignatures: [{ time: 0, numerator: 4, denominator: 4 }],
      tempos: [{ time: 0, qpm: 300 }],
      notes: [
        { pitch: 60.3, startTime: 0, endTime: 0.9 },
        { pitch: 65.4, startTime: 0.9, endTime: 1.9 },
        { pitch: 67.2, startTime: 1.9, endTime: 2.7 },
      ]
    }
  }

the code should return something like this:

render(){
  return(
    <div>
      <img src={svg1}></img>
      <img src={svg2}></img>
      <img src={svg3}></img>
    </div
  )
}

Moreso, i would like to set inner styling with the keys. So that for:

 { pitch: 65.4, startTime: 0.9, endTime: 1.9 },

you get:

<img src={svg2} style={{transform:'translateY({pitch})', 
 animationDelay:'0.9s', animationDuration:'1s'}}></img>

where a transform is set by the pitch, and animation delay and duration is set by start time and end time.

All and any help is appreciated!

Answer 1

There are some parts. First, if your app compatibles , you can import the SVG directly. Then, you can show the notes based on sequence.BEATB.notes using map .

Like this

import { ReactComponent as NoteSymbol } from "./note.svg";

// ...
{this.sequence.BEATB.notes.map((note, idx) => (
  <NoteSymbol
    key={idx}
    className="note"
    style={{
      marginTop: note.pitch,
      animationDelay: "0.9s",
      animationDuration: "1s"
    }}
  />
))}

https://codesandbox.io/s/sharp-paper-tc9rs?file=/src/App.js

BTW, in the example, I used marginTop instead of transform because, this way, the note movement will be calculated in document flow (so the parent height will "consider" the notes margin.