Question

让我们说我的应用程序通常有这样的组件：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Loading from './Loading'

export default class Form extends Component {
  componentWillMount () {
    const { propogateValues, isFetching, fetchPath } = this.props
    console.log(this.props)
    if (isFetching) {
      propogateValues(fetchPath)
    }
  }
  render () {
    const { handleSubmit, path, successPush, isFetching } = this.props
    if (isFetching) {
      return (<div> <Loading /></div>)
    } else {
      return (
        <form onSubmit={(e) => { handleSubmit(e, path, successPush) }}>
          {this.props.children}
        </form>
      )
    }
  }
}

其中Loading是表示加载动画的纯表示组件。

问题：当调度接收操作并且组件收到新的isFetching: false道具时，它会重新呈现组件。但是，从界面的角度来看，我希望Loading至少存在一段时间（.5秒），因为非常快的切换使它看起来比没有这样的组件更糟糕。

不确定如何实现它，我真的应该在这里使用redux存储还是有更好的方法？

Answer 1

添加react-delay组件应该有助于创建效果。

<div>
  <Delay wait={500}>
    <Loading />
  </Delay>
</div>

source code for Delay很容易理解。

React + Redux：如何强制加载元素至少存在0.5秒

1 个答案: