Map循環中的條件語句

Question

在ReactJS中，我試圖在map循環中調用if語句。 示例代碼是這樣的：

var items = ['abc', '123', 'doe', 'rae', 'me'];
return (
  <div>

       {items.map((item, index) => (
            <span dangerouslySetInnerHTML={{ __html: item }}></span>

            {index % 2:
                <h1>Test Output/h1>
            }

        ))}

  </div>
}

除了我不斷收到他的錯誤：

 Module build failed: SyntaxError: Unexpected token, expected , (73:11)
web_1  | 
web_1  |   71 |                     <span dangerouslySetInnerHTML={{ __html: item }}></span>
web_1  |   72 |                     
web_1  | > 73 |                     {index % 2:
web_1  |      |                     ^

如何在循環中調用if語句？

Answer 1

首先，沒有父容器，您不能將多個兄弟元素作為JSX返回，除非您將它們放入數組中（盡管您不能從render方法返回數組，直到React添加對返回片段的支持為止）。

這是無效的：

return (
  <div>First sibling</div>
  <div>Second sibling</div>
);

這些都是有效的：

return (
  <div>
      <div>First sibling</div>
      <div>Second sibling</div>
  <div>
);

// vs.
// (notice this requires adding keys)

return ([
  <div key={1}>First sibling</div>,
  <div key={2}>Second sibling</div>
]);

其次，如果要使用條件語句來呈現組件，則必須這樣做：

{(index % 2 === 0) &&
  <div>This will render when index % 2 === 0</div>
}

這樣做的原因是，如果第一個操作數為真，則JavaScript中的&&運算符將得出第二個操作數（在本例中為JSX）。 您還可以使用三元語句，如下所示：

{(index % 2 === 0) ?
  <div>This will render when index % 2 === 0</div>
:
  <div>This will render when index % 2 !== 0</div>
}

全部放在一起

var items = ['abc', '123', 'doe', 'rae', 'me'];
return (
  <div>

       {items.map((item, index) => (
            <div>
                <span dangerouslySetInnerHTML={{ __html: item }}></span>

                {(index % 2 === 0) &&
                    <h1>Test Output/h1>
                }
            </div>

        ))}

  </div>
}

[編輯]重要說明

我應該提到的是，每當使用items.map(...)類的元素來渲染元素數組時，您實際上應該為要渲染的列表中的每個元素分配一個唯一鍵：

{items.map((item, index) => (
  <div key={item.get('id')}>Item #{index}</div>
))}

原因是React在這里進行了一些優化，以降低渲染（和重新渲染）列表的成本。 如果它看到一個曾經由鍵0, 1, 2組成的列表，並且您已經完成了一些操作以對狀態中的項進行重新排序，那么現在這些鍵將以0, 2, 1的順序傳遞給地圖函數。 0, 2, 1 ，它不會重建DOM來反映更改后的順序，而只是交換DOM節點（速度更快）。

這導致了為什么您不想使用index作為元素的鍵，除非您知道它們的順序不會改變。 假設您使用迭代索引作為鍵：

{items.map((item, index) => (
  <div key={index}>Item #{index}</div>
))}

現在，如果您的項目更改順序，則它們的鍵輸出順序相同（索引0將始終是第一個索引，索引1將始終是第二個索引，依此類推），但每個div內的文本不同。 React將對真實的DOM進行比較，注意每個div的值已更改，然后從頭開始重建DOM的整個塊。

如果您的列表元素包含狀態未在DOM中反映的內容（例如<input> ，則情況將更加糟糕。 在這種情況下，React將重建DOM，但是用戶在這些字段中輸入的任何文本將保持原樣！ 這是Robin Pokorny的示例，演示了可能出問題的地方（摘自本文 ）：

https://jsbin.com/wohima/edit?js,output

Answer 2

我猜您的條件是if index % 2 == 1 ，它在index為奇數時顯示標題

{index % 2 == 1 && (
     <h1>Test Output/h1>
)}

官方文件

但就您而言，您正在{}中編寫if條件。 這意味着您正在編寫JavaScript。 因此，只需使用JavaScript語法。

if(index % 2 == 1){
   return(
    <div>
      <span dangerouslySetInnerHTML={{ __html: item }}></span>
      <h1>Test Output/h1>
    </div>);
}

更新：正如Jaromanda指出的那樣，您需要返回一個元素。 因此，將<span>和<h1>包裝到<div>中將得到一個元素。