JSX 三元表达式对 Map 的行为不同

Question

简单的问题：

JSX 允许您返回一个 map 函数，该函数将由一堆 div 或图像元素或任何 组成，而不必将 JSX 表达式包装在一个元素中。然而，如果你在没有 map 函数的情况下明确地输入一系列 DIV，它就会对你大喊大叫。请参见下面的示例：

    <div style={{display:'flex', justifyContent:'space-between'}}>
                {
                    (this.props.label.exampleImages.length > 0)

                    ? this.props.label.exampleImages.map((image, i)=>{
                        return <img src={image.url}
                             alt={image}
                             key={`image-${i}`}
                             style={{marginTop:10}}/>
                    })

                    : 
                        // this throws error even though above is essentially doing the same thing
                        <div className="image-placeholder"></div>
                        <div className="image-placeholder"></div>
                        <div className="image-placeholder"></div>


                }
            </div>

这是为什么？他们评估的不是完全相同的东西吗？

Answer 1

不同之处在于，在三元表达式的第一部分中，您只返回一个值，即图像数组。但是，当您的 this.props.label.exampleImages.length > 0 语句返回 false 时，您将返回多个值，这是没有意义的，正如此处 docs 所解释的那样。

您的数组周围已经有一个封闭的 div，即<div style={{display:'flex', justifyContent:'space-between'}}>。导致您出错的原因是您正在尝试按照以下方式进行操作：var a = arr.length > 0 ? 1 : 1 2 3。这只是无效的 javascript，因为您不能在三元表达式上返回多个值。

Answer 2

首先，重要的是要记住 JSX 被编译为 JavaScript，而这最终是使用 JavaScript 语法规则运行的。

在您的三元运算符中，每个部分都需要计算为单个值。例子 var myVar = maxValidNumStuff < getCurrItemNum() ? 'too many' : 'good'

maxValidNumStuff < getCurrItemNum() 计算为布尔值，其他部分计算为字符串。

Map 方法per Mozilla 显示.map 的返回值是一个数组。

如果您查看 JSX 如何在 map 之外编译每个 <div>blah</div>，您会发现您正在放置多个表达式，这会扰乱三元运算符想要的单个表达式。