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

回答

相關問題