JSX 不会与 map 函数一起在条件渲染上渲染

【问题标题】：JSX doesn't render on conditional render alongside with map functionJSX 不会与 map 函数一起在条件渲染上渲染
【发布时间】：2021-11-09 12:59:56
【问题描述】：

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

这是我的代码：

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

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

谢谢

【问题讨论】：

【解决方案1】：

您缺少从地图函数返回组件。

这是与您的问题相匹配的示例：

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

【讨论】：

【解决方案2】：

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

试试这个方法。

例子：

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

【讨论】：