Javascript 此react render函数的语法有什么问题？

我正在编写一个react组件，它呈现一个引导旋转木马。我在我的渲染函数中得到语法警告，我一辈子都不知道为什么

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

render:function（）{
var seconds=Math.floor（新日期（）.getTime（）/1000）；
返回(
{
this.state.config.slides.map（函数（slide，i）{
var active=i==this.state.config.activeSlide？'active'：''；
返回

}.绑定（本）
}
{
this.state.config.slides.map（函数（slide，i）{
var active=i==this.state.config.activeSlide？'item active'：'item'；
返回(
{
如果（幻灯片.标题.文本！=''）{
返回(
欢迎来到您的物业档案！
)
}
}
)
}.绑定（本）
}
);
},

Php storm从这里开始显示问题：

---

实际上，我计划将幻灯片拆分为一个单独的组件，但我很想知道为什么这种语法错误，以及如何修复它。

请参阅官方文档：

“if-else语句在JSX中不起作用。这是因为JSX只是函数调用和对象构造的语法糖。”

对于这类问题，我通常使用以下语法：

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

{
slide.caption.text！==''&&
...
}

参见官方文档：

“if-else语句在JSX中不起作用。这是因为JSX只是函数调用和对象构造的语法糖。”

对于这类问题，我通常使用以下语法：

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

{
slide.caption.text！==''&&
...
}

谢谢，我错过了这一点，但您建议的编辑也会导致语法错误。看，有什么想法吗？啊，是的，我甚至没看到：）我错过了那一点，谢谢，但你建议的编辑也会导致语法错误。看，有什么想法吗？啊，是的，我甚至没看到：）