JSX 不会在有条件渲染的情况下与 map 函数一起渲染

Question

我想根据变量是真还是假来渲染组件。目前条件成立，但组件根本没有渲染。

这是我的代码：

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

我的控制台在 router.query.slug != item 条件下返回 true 那么我错过了什么？

谢谢

Answer 1

您缺少 return 地图函数中的组件。

这是符合您的问题的示例：

解决方案 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>

您可以在 here.

中阅读有关 map 函数的信息

Answer 2

如果使用block语法，需要指定return关键字。详细了解 arrow-function

试试这个方法。

示例：

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

JSX doesn't render on conditional render alongside with map function