用antd的Spin组件实现数据加载界面

Question

改了一下，我当时放代码没说清，这个三元判断是两种情况，初加载从后端取数据，取到了显示数据，取不到c组件可以看作显示激活信息的组件。总之一个对应有数据，一个对应没数据。这种情况下加载组件应该放在哪比较合适？请问

求助各位大神
感觉有点卡住了
本来是在componentWillMount里调用函数向后端取数据，前端加载渲染从后端拿来的数据

class A extends Component {
    componentWillMount() {
        this.props.actions.queryData();
        //这个函数主要是取数据填充this.props.info
    }

    render() {
        return (
            <React.Fragment>
 {!_.isEmpty(this.props.info)? <B info={this.props.info} /> :<C />
          </React.Fragment>
      );
    }
}

大概是这个样子，所以Spin这个加载组件放在什么位置会比较合适呢？已善用搜索，没找到答案，感谢各位

Answer 1

你逻辑直接可以这样，this.props.info 为空，就直接展示 Spin这个loading组件，数据返回，在走三元判断时，不就直接展示你的 B 组件了吗？所以简单点的，就直接将 null 改为 Spin 就可以了