Question

我尝试通过检查照片属性是否有项目来做if else语句，但是使用以下代码失败，需要帮助，我不知道出了什么问题。 snytax看起来很好。

render() {
    return ( < p > other dom < /p>

      < div className = "photo_upload" > {
        item.photos.length > 0 ?
          < img src = {
            item.photos[1]
          }/ > : < button className = "btn btn-lg btn-primary" > Browse < /button> }< /div >

          < p > more dom < /p>
      )
    }

Answer 1

您需要一个根元素。与<div></div>

一样

render() {
  <div>
    ...
  </div>
}

Answer 2

首先，取出<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" tools:ignore="RtlHardcoded"> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" app:backgroundTint="@color/white" app:srcCompat="@drawable/ic_expand" app:useCompatPadding="false" tools:ignore="RtlHardcoded"/> </LinearLayout>和< p > other dom < /p>，因为你只能从渲染函数中返回一个东西。您返回的所有内容都必须包含在一组标签中。

除此之外，你的逻辑没有任何内在错误。我建议尽可能少地在你的JSX模板中加入逻辑，尽管这更像是一种风格选择。

< p > more dom < /p>

Answer 3

每个react render方法都必须返回一个dom元素。您已返回三个 - 您的< p > other dom < /p>，< div className = "photo_upload" >和<p> more dom < /p>。将它们包裹在一个div中。如果你看一下你得到的错误信息，它应该告诉你这个。

这是您的渲染方法，更改为返回单个元素，并进行了一些格式设置改进：

render() {
  return ( 
    <div>
      <p> other dom </p>

      <div className="photo_upload"> 
        { item.photos.length > 0 ?
          <img src = {item.photos[1]}/> : 
          <button className="btn btn-lg btn-primary">Browse</button> 
        }
      </div>

      <p> more dom < /p>
    </div>
  )
}

if else语句中的render函数错误的反应

3 个答案: