ReactJS在等待數據時加載圖標

Question

我正在試驗ReactJS，我的很多應用程序依賴於從API加載數據，使用jQuery來幫助我。

我已加載文本/圖標設置，但感覺有點hacky並且不是非常可重用：

ListWrapper = React.createClass({
    getInitialState: function() {
        return {
            loading: true,
            listData: []
        };
    },
    componentDidMount: function() {
        Api.get('/v1/listdata', function (data) {
            react.setState({
                    loading: false,
                    listData: data
            });
        });
    },
    render: function() {
        return (
            <List loading={this.state.loading} data={this.state.listData} />
        );
    }
});

List = React.createClass({
    render: function() {

        var mapData;
        if (this.props.loading)
            mapData = <Loader />; 
        else {
            mapData = this.props.data.map(function(item) {
                return (
                    <ListItem name={item.name} />
                );
            });
        }

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

這工作正常，但整個if / else語句都有代碼味道的提示，因為我必須在整個地方做這個邏輯。

無法在網上找到關於如何最好地接近這一點的任何內容...什么是更好的方法？

Answer 1

只需刪除else語句，就可以簡化現有代碼，使其更簡潔：

render: function() {
        if (this.props.loading) {
            return <Loader />;
        }
        var mapData = this.props.data.map(function(item) {
            return (
                <ListItem name={item.name} />
             );
        });
        return (
            <div>
                {mapData}
            </div>
        );
    }

但我能想到的一個解決方案是讓你的組件接受一個isActive bool並將if邏輯移動到加載器組件而不是單個組件。 當isActive = true它顯示微調器/加載圖標。 否則它只返回一個null組件或為空。

List = React.createClass({
    render: function() {

        var mapData = this.props.data.map(function(item) {
            return (
                <ListItem name={item.name} />
            );
        });
        return (
            <div>
                <Loader isActive={this.props.isLoading} />
                {mapData}
            </div>
        );
    }
});

這種情況不是在任何地方執行if邏輯，而是在Loader組件中執行一次，如果它處於非活動狀態，它只返回null / empty。