Question

对我来说有一些奇怪的情况至少是奇怪的。到目前为止，我正在构建时间轴组件。如果用户时间线为空，我想呈现不同的反应类这里是我做的一部分代码

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

编辑：从firebug发出的错误错误：解析错误：第71行：JSX值应该是表达式或带引号的JSX文本在http://qfriends.dev/js/components/socialnetwork/user_timeline.js:71:20 ...指向此<TimelineList data=items />

Answer 1

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

Answer 2

你应该在结尾添加一个分号：

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

或者这样做：

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

ReactJs if else in render

2 个答案: