如何在反應中創建動態 css class

Question

我想在 class 名稱中動態添加以下 class 所以我不必為所有類制作不同的組件 任何人都可以幫我解決這個問題，如果你能謝謝你，那將是很大的幫助

 <AnnotationLabel
                x={120}
                y={160}
                ny={140}
                nx={20}
                color={"#afb1b3"}
                editMode={false}
                className="country-bg-usa hand-cursor"
                note={{
                    "title": "USA".toUpperCase(),
                    "align": "middle",
                    "orientation": "topBottom",
                    "bgPadding": { left: 7, right: 5 },
                    "padding": 0,
                    "titleColor": "white"
                }}
                events={{
                    onClick: () => gotoCountry("USA")
                }}
            />

這是我想放在 className 屬性中的 css

   .country-bg-canada .annotation-note-bg {
    height: 23px;
      fill: #ff0000;
     fill-opacity: 1;
    }
  .country-bg-usa .annotation-note-bg {
    height: 23px;
   fill: #1d1de0;
   fill-opacity: 1;
  }
 .country-bg-suriname  .annotation-note-bg {
  height: 23px;
  width: 56px;
   fill: #f8b13e;
   fill-opacity: 1;
 }

      .country-bg-ireland .annotation-note-bg {
    height: 23px;
     width: 45px;
      fill: #008000;
           fill-opacity: 1;
         }
         .country-bg-unitedKingdom .annotation-note-bg {
      height: 23px;
        width: 88px;
       fill: #0B52F7;
       fill-opacity: 1;
       }
         .country-bg-singapore .annotation-note-bg {
        height: 23px;
          width: 60px;
   fill: #D42441;
      fill-opacity: 1;
         }

Answer 1

你可以這樣做：

 <AnnotationLabel
                x={120}
                y={160}
                ny={140}
                nx={20}
                color={"#afb1b3"}
                editMode={false}
                className={`country-bg-${Your-country} hand-cursor`} // use the template string
                note={{
                    "title": "USA".toUpperCase(),
                    "align": "middle",
                    "orientation": "topBottom",
                    "bgPadding": { left: 7, right: 5 },
                    "padding": 0,
                    "titleColor": "white"
                }}
                events={{
                    onClick: () => gotoCountry("USA")
                }}
            />