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显示微调器/加载图标时。否则它只返回一个空组件或为空。

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。

ReactJS在等待数据时加载图标

1 个答案: