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。