javascript - React Spinner 在没有状态的情况下加载动画/ View ？

Question

我有一个组件，需要等待组件正确安装。在那之前，我想展示一个加载动画。我如何在 React 中执行此操作？

我想在没有状态的情况下执行此操作，因为我有许多需要这种功能的无状态组件。有什么有效的方法可以做到这一点？如果没有，我将如何处理状态？有一个变量 isLoading，然后在 componentDidMount 中将变量设置为 false 并在我的 render() 中进行条件渲染？

Answer 1

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

我建议使用'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')
);