ReactJs if if else in render

有一些奇怪的情况，至少对我来说很奇怪。我正在构建时间轴组件，迄今为止非常好。如果用户的时间表是空我要呈现不同发生反应类这里的代码我没有ReactJs if if else in render

var Timeline = React.createClass({ 
getInitialState: function() { 
    return { 
     data: [], 
     page: 0, 
     loadingFlag: false 
    } 
}, 
loadTimelineFromServer: function() { 
    var nextPage = this.state.page + 1; 
    var url = this.props.url + '?page=' + nextPage; 
    $.ajax({ 
     url: url, 
     dataType: 'json', 
     cache: true, 
     success: function(response) { 
      if (this.isMounted()) { 
       this.setState({ 
        data: this.state.data.concat(response.data), 
        loadingFlag: false, 
        page: nextPage 
       }); 
      } 
     }.bind(this), 
     error: function(xhr, status, err) { 
      console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
}, 
componentDidMount: function() { 
    this.loadTimelineFromServer(); 
}, 
render: function() { 
    var items = this.state.data; 
    var renderer; 
    if (items.length) { 
     renderer = <TimelineList data=items /> 
    } else { 
     renderer = <EmptyTimeline /> 
    } 

    return (
     <div> 
     {renderer} 
     </div> 
    ); 
} 
});

EDIT的一部分：从萤火错误触发的错误：解析错误：行71：JSX值应是表达式或http://qfriends.dev/js/components/socialnetwork/user_timeline.js:71:20带引号的文本JSX ... 指向这个<TimelineList data=items />

来源

2015-06-24 Marcel Djaman

值得一提的是，我遵循了reactjs文档页面的步骤http://facebook.github.io/react/tips/if-else-in-JSX.html –

什么不起作用？你有看到什么吗？你有任何错误？多一点信息会有帮助。 – tobiasandersen

@tobiasandersen当然！看到我的编辑 –

<TimelineList data=items />无效JSX。你应该使用花括号来传递一个javascript表达式作为道具：<TimelineList data={items} />。

来源

2015-06-24 12:01:37

谢谢，我差点忘了这个规则！U救了我的一天:) –

您应该添加或者分号来结束：

if (items.length) { 
    renderer = <TimelineList data=items />; 
} else { 
    renderer = <EmptyTimeline />; 
}

或做这样的：

if (items.length) { 
    renderer = (
     <TimelineList data=items /> 
    ); 
} else { 
    renderer = (
     <EmptyTimeline /> 
    ); 
}

来源

2015-06-24 11:49:55 tobiasandersen

好吧，让我试试 –

nope没有为我工作:( –

感谢您的时间先生！真的很感谢努力 –

ReactJs if if else in render

回答

相关问题