Switch語句在JSX（React.js）中不起作用

Question

我試圖使我的開關在JSX中工作，但是由於某種原因，它不起作用。 每個輸出都有一個ID，即I。現在，我嘗試使用I進行switch語句，但是它將始終返回默認值。

為什么？

我的代碼：

 {(() => {
   switch (i) {
     case "0":   return "{indents}";
     case "1":   return "{indents2}";
     case "2":   return "{indents3}";
     default:    return "{indents3}";
   }
  })()}

所有這些都在具有屬性key = {i}的div中。

Answer 1

我會推薦地圖代替。 地圖/對象對類型不敏感。 它還將降低執行復雜度：

const map = {
  0: indents,
  1: indents2,
  2: indents3
}

<div>{map[i] || indents3}</div>

或者，由於使用的是0,1,2 ..，因此也可以將其作為數組。

const map = [indents, indents2, indents3];
<div>{map[i] || indents3}</div>