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

时间:2017-03-06 07:08:58

标签: javascript reactjs

我尝试通过检查照片属性是否有项目来做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>
      )
    }

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

首先,取出<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>

答案 2 :(得分:0)

每个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>
  )
}