如果else語句在渲染功能錯誤反應

我試圖做如果else語句通過檢查照片屬性是否具有項目，但失敗與下面的代碼，需要幫助，我不知道什麼是錯的。 snytax看起來很好。如果else語句在渲染功能錯誤反應

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

來源

2017-03-06 Alex Yong

什麼是錯誤您收到？ –

您需要一個根元素。像<div></div>

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

來源

2017-03-06 07:17:39 CodinCat

首先，拿出<p> other dom < /p>和<p> more dom < /p>，因爲你只能從你的渲染函數返回的一件事。您返回的所有內容必須包含在一組標籤中。

除此之外，你的邏輯沒有什麼天生的錯誤。我建議儘可能在您的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> 
); 
}

來源

2017-03-06 07:23:19

我不想把它放到一個變量中，我更喜歡直接渲染，因爲有很多像這樣的字段。 –

每個反應render方法都必須返回一個dom元素。您將返回三個 - 您的<p> other dom < /p>，您的< div className = "photo_upload" >和您的<p> more dom < /p>。把它們包裝在一個單獨的格子裏。如果你看看你收到的錯誤信息，它應該告訴你這一點。

這是你的渲染方法，改爲返回單個元素，並與一些格式的改進：

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

來源

2017-03-06 07:24:26

如果else語句在渲染功能錯誤反應

回答

相關問題