Javascript 反应微调器加载动画/视图而不显示状态？

我有一个组件，需要等待组件正确安装。在此之前，我想展示一个正在加载的动画。我怎样才能在反应中做到这一点

---

我希望在没有状态的情况下执行此操作，因为我有许多无状态组件需要这种功能。有什么有效的方法可以做到这一点吗？如果不是，我将如何处理国家？让一个变量

isLoading

，然后在

componentDidMount

中将变量设置为false，并在my

render（）

中进行条件呈现。在这种情况下，使用状态是正确的，因为只有组件知道异步调用何时完成

我建议使用

'react-loading'

包

import ReactLoading from 'react-loading'

class App extends React.Component {
  state = {
    isLoading: true
  };

  componentDidMount() {
    setTimeout(() => this.setState({ isLoading: false }), 2000); // do your async call
  }

  render() {
    if(this.state.isLoading) { // if doing asyng things
      return <ReactLoading type={type} color={color} height='667' width='375' />; // render the loading component
    }

    return (
      <div>Content</div>
    ); 
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

从“反应加载”导入反应加载
类应用程序扩展了React.Component{
状态={
孤岛加载：正确
};
componentDidMount（）{
setTimeout（（）=>this.setState（{isLoading:false}），2000）；//执行异步调用
}
render（）{
if（this.state.isLoading）{//if正在做一些简单的事情
return；//呈现正在加载的组件
}
返回(
内容
); 
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);

将一个道具传递给组件，比如

loadingFinished={animationLibLoaded？true:false}

，然后在组件的

render（）

函数中有条件地渲染它，比如

loadingFinished？（）：）

对于这个组件来说，正确装载意味着什么？因此，它是一个显示一些图像的组件。图像已设置动画，但是，加载动画库需要一些时间。问题是，在加载动画库之前，屏幕上已经可以看到图像了——我不想这样做。所以我想在上面放一个加载/旋转动画。