Javascript react中呈现函数错误中的if else语句

我试图通过检查photo属性是否有项来执行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>
      )
    }

---

您需要一个根元素。像

首先，取出其他dom

和更多dom

，因为您只能从渲染函数返回一个内容。您返回的所有内容必须包含在一组标签内

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

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

  return (
    <div className="photo_upload">
      {item}
    </div>
  );
}

每个react render方法都必须返回一个dom元素。您将返回三个-您的其他dom

、您的

和您的更多dom

。将它们包装在一个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>
  )
}

---

你得到的错误是什么？我不想把它放在变量中，我更喜欢直接渲染，因为有很多像这样的场。

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