ReactJS 在等待数据时加载图标答案

【问题标题】：ReactJS Loading icon while waiting for dataReactJS 在等待数据时加载图标
【发布时间】：2015-06-10 04:33:56
【问题描述】：

我正在试验 ReactJS，我的大部分应用程序都依赖于从 API 加载数据，使用 jQuery 来帮助我。

我已经加载了文本/图标设置，但感觉有点笨拙，而且不太可重用：

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 语句有一些代码味道，因为我必须在所有地方都执行该逻辑。

在网上真的找不到任何关于如何最好地解决这个问题的信息...有什么更好的方法吗？

【问题讨论】：

标签： javascript reactjs

【解决方案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 显示微调器/加载图标。否则它只会返回一个空组件或空。

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。

【讨论】：