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

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

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

Answer 1

请参阅官方文档： https://facebook.github.io/react/tips/if-else-in-JSX.html

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

我经常对这类问题使用以下语法：

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

这个反应渲染函数的语法有什么问题？

1 个答案: