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

Question

简单问题：

JSX 允许你 return 一个地图函数，它将由一堆 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

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

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

Answer 2

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

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

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

Map 方法 per Mozilla 表明 .map 的 return 值是一个数组。

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

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

JSX Ternary Expression Behaves Differently For Map

javascript

reactjs

ternary-operator

jsx