javascript - ReactJS 在等待数据时加载图标

Question

我正在试验 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 语句有代码味道的提示，因为我必须在所有地方执行该逻辑。

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

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。