React有條件地顯示鏈接，如果json文件上有內容？

Question

進行了一些搜索，但找不到任何東西。 這在jQuery和Rails上很簡單，但是不確定React中是否有正確的方法。 我具有從JSON文件獲取其數據的組件，並且僅在JSON具有內容的情況下才顯示特定鏈接，否則我想將其隱藏。 到目前為止，我還是沒有運氣嘗試過這種方式：

  renderList(projectLinks){ //let self = this; return projectLinks.map(function(link) { var showDemo = ""; if(link.urlDemo === ""){ console.log("i'm empty"); showDemo = "displayNone"; } return <Panel header={link.title} eventKey={link.eventKey} key={link.title}> <p>{link.description}</p> <img src={link.image} className="img-thumbnail" alt="project thumbnail"/><br /> <a href={link.urlDemo} className={showDemo}>Demo </a> <a href={link.urlCode}>Code </a> </Panel> }); } 

因此，如果json鏈接為空，例如：“ urlDemo”：“”，則我希望該鏈接被隱藏。

感謝幫助。

Answer 1

在渲染內部，使用條件運算符。 這是一個例子

render(){
   return (
      <div>
          {this.state.check ? <div>Show this if check is true</div> :
              <div>Show this if check is false</div>}
      <div>
   )
}

編輯：一個更具體的例子

render(){
   return(
      <div>
         {link.urlDemo ? <a href={link.urlDemo}>Demo </a> : null}
      </div>
   )
} 

另一種方法是：

render(){
   return(
      <div>
         {link.urlDemo && <a href={link.urlDemo}>Demo </a>}
      </div>
   )
}