Question

如何使用react js创建简单的微调器？

假设我有这样的代码：

 let cars = [
      {id: 1, name: "Golf"},
      {id: 2, name: "Audi"},
      {id: 3, name: "Passat"},
      {id: 4, name: "Bmw"}
    ];

class Test extends React.Component {
        constructor(props){
        super(props);

      this.state = {
        loading: true
      }
    }

    componentDidMount(){
        this.setState({loading: false})
    }

        render(){
        let content = this.state.loading ? <div>Loading</div> : cars.map((c, i) => <div key={i}>{c.name}</div>)

        return (
        <div>{content}</div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

我试图在没有加载汽车列表的情况下显示loading。

这是fiddle

有什么想法吗？

Answer 1

您可以使用setTimeout来模拟异步请求

componentDidMount(){
    setTimeout(() => { 
      this.setState({loading: false})
    },2000)
} // simulate loading

曾为 Fiddle

由于

Answer 2

Reactjs是关于一个称为组件的概念的。那么什么是React组件？

React组件是函数或类。

作为类或函数的组件的目的是产生要显示给用户的html。其次要目的是处理用户的反馈。例如，只要用户单击或拖动或输入任何类型的事件，这些事件中的任何一种。

每当我们有需要向用户展示的内容时，我们都会编写一些jsx。 JSX是类似于html的代码。为了处理用户的反馈，我们将使用称为事件处理程序的这些软件例程。

因此，当您希望向您的Reactjs应用程序中添加微调器时，您会怎么做？您创建了一个微调器组件，可以通过创建一个名为Spinner.js的文件来实现，其中的代码如下所示：

import React from 'react';

const Spinner = () => {
  return (
    <div className="ui active dimmer">
      <div className="ui big text loader">Loading...</div>
    </div>
  );
};

export default Spinner;

在上面的示例中，我使用了一些来自Semantic-UI的className，请随时查看其文档。然后，您可以像下面这样将Spinner组件作为组件实例添加到Test组件中：

import React from 'react';
import ReactDOM from 'react-dom';
import Spinner from './Spinner';

class Test extends React.Component {
        constructor(props){
        super(props);

  this.state = {
    loading: true
  }
}

componentDidMount(){
    this.setState({loading: false})
}

    render(){
    let content = this.state.loading ? <Spinner /> : cars.map((c, i) => <div key={i}>{c.name}</div>)

    return (
    <div>{content}</div>
  )
}

}

这就是您在Reactjs中创建简单微调器的方式。

Answer 3

使用非常短的代码，我可以在react组件中生成等待微调器

getSpinner:function(){
 return ( this.state.loadingTree?
    <div><img style={{width: '90px', objectFit: 'scale-down', 
     position:'absolute',opacity:'0.95', align: 'middle' }} src= 
    {"/images/spinner.gif"}/></div>:""
 );
},

render(){
   return(){
    <div style={{position:'absolute', top:'40%',left:'50%'}}>{this.getSpinner()} 
   </div>};   }

如何使用react js创建加载微调器

3 个答案: