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在地图之外如何编译每个<div>blah</div>，你会看到你正在放置多个表达式，这些表达式会扰乱三元运算符所需的单个表达式。

JSX三元表达式对地图的表现不同

2 个答案: