JSX 不與地圖功能一起在條件渲染上渲染

Question

我想根據變量為真或假來呈現組件。 目前條件為真，但組件根本沒有渲染。

這是我的代碼：

<div className={styles.container}>
   {array.map(item => {
    router.query.slug != item ? <Component /> : null;
    })}
</div>

我的控制台為條件router.query.slug != item返回 true 那么我錯過了什么？

謝謝

Answer 1

您缺少從 map 函數返回組件。

這是與您的問題相匹配的示例：

解決方案1

<div className={styles.container}>
    {array.map(item => {
        return router.query.slug != item ? <Component /> : null;
    })}
</div>

解決方案 2單行

<div className={styles.container}>
    {array.map(item => router.query.slug != item ? <Component /> : null)}
</div>

您可以在此處閱讀有關map功能的信息。

Answer 2

如果使用block語法，則需要指定 return 關鍵字。 了解有關箭頭函數的更多信息

試試這個方法。

例子：

<div className={styles.container}>
   {array.map(item => {
     return (router.query.slug != item ? <Component /> : null)
    })}
</div>