這個反應渲染函數的語法有什麼問題？

Question

我在寫一個呈現引導程序輪播的反應組件。我在渲染函數中收到了語法警告，對於我的生活我無法弄清楚爲什麼。

render: function() { 
     var seconds = Math.floor(new Date().getTime()/1000); 
     return (
      <div id={'#'+this.state.carouselId+seconds} className="react-carousel carousel slide"> 
       <ol className="carousel-indicators"> 
        { 
         this.state.config.slides.map(function(slide,i) { 
          var active = i == this.state.config.activeSlide ? 'active' : ''; 
          return <li data-target={'#'+this.state.carouselId+seconds} data-slide-to={i} className={active} /> 
         }.bind(this)) 
        } 
       </ol> 
       <div className="carousel-inner"> 
        { 
         this.state.config.slides.map(function(slide,i) { 
          var active = i == this.state.config.activeSlide ? 'item active' : 'item'; 
          return (
           <div className={active}> 
            <img src={slide.url} className="img-responsive"/> 
            { 
             if(slide.caption.text!==''){ 
              return(
               <div class="container"> 
               <div class="carousel-caption"> 
                <h1>Welcome to your property profile!</h1> 
               </div> 
               </div> 
              ) 
             } 
            } 
           </div> 
          ) 
         }.bind(this)) 
        } 
       </div> 
       <a className="left carousel-control" href={'#'+this.state.carouselId+seconds} data-slide="prev"> 
        <span className="icon-prev" /> 
       </a> 
       <a className="right carousel-control" href={'#'+this.state.carouselId+seconds} data-slide="next"> 
        <span className="icon-next" /> 
       </a> 
      </div> 
     ); 
    }, 

腓風暴顯示了問題，從這裏開始：

其實我打算出打破滑動到單獨的組件，但編號真的想知道爲什麼這個語法錯誤，以及如何修理它。

Answer 1

請參見官方文檔： https://facebook.github.io/react/tips/if-else-in-JSX.html

「 if-else語句不JSX裏面工作，這是因爲JSX是函數調用和對象的構造只是語法糖」

我通常使用以下語法這種類型的問題：

{ 
    slide.caption.text !== '' && 
    <div class="container"> 
     ... 
    </div> 
}