[英]How can I put the loading while waiting on render Reactjs
I just made an animated "loading.." using css but i want it to only exist when it's waiting for data to load/render.. any idea how I really dont know how im so new to this?... 我只是使用CSS制作了一个动画“加载中..”,但我希望它仅在等待数据加载/渲染时才存在。任何想法我真的不知道我对此有何新意吗?
this is my componentdidmount 这是我的componentdidmount
componentDidMount() {
$.ajax({
url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
success:(data)=>{
this.setState({
jsonReturnedValue:data
})
}
})
this.setState({isLoading: false})
}
this is my render 这是我的渲染
renderItem(d, i) {
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ='btn btn-danger' onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>
</tr>
}
render() {
if(this.state.isLoading) {
return <span className="Loader">
<div className="Loader-indicator" >
<h1>
<span>Loading</span>
<span className="Loader-ellipsis" >
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
</span>
</h1>
</div>
</span>
}
let {jsonReturnedValue} = this.state;
const isEnabled = this.canBeSubmitted();
return(
<div>
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered" id="result">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
Maintain a state in your react component that is set to true whenever you give a call to load the data 每次调用加载数据时,在react组件中保持一个设置为true的状态
Eg 例如
class App extends React.Component {
constructor(){
super();
this.state = {isLoading: true}
}
componentDidMount() {
$.ajax({
url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
success:(data)=>{
this.setState({
jsonReturnedValue:data, isLoading: false
})
}
})
}
render() {
if(this.state.isLoading) {
return <span className="Loader">
<div className="Loader-indicator" >
<h1>
<span>Loading</span>
<span className="Loader-ellipsis" >
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
</span>
</h1>
</div>
</span>
}
return (
<div>Hello World</div>
)
}
See a demo snippet 查看演示片段
class App extends React.Component { constructor(){ super(); this.state = {isLoading: true} } componentDidMount() { setTimeout(() => {this.setState({isLoading: false})}, 3000) } render() { if(this.state.isLoading) { return <span className="Loader"> <div className="Loader-indicator" > <h1> <span>Loading</span> <span className="Loader-ellipsis" > <span className="Loader-ellipsisDot">.</span> <span className="Loader-ellipsisDot">.</span> <span className="Loader-ellipsisDot">.</span> </span> </h1> </div> </span> } return ( <div>Hello World</div> ) } } ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
add loading
state, and make it true, when data is loaded. 添加
loading
状态,并使其在加载数据时为true。
in render()
function make add loading state code, using ?
在
render()
函数中,使用?
添加加载状态代码?
operator. 操作员。
{this.state.loading ? (<YourComponent />) : (<LoadingState />)}
replace <YourComponent />
and <LoadingState />
with your component or needed jsx tags... 将
<YourComponent />
和<LoadingState />
替换为您的组件或所需的jsx标签...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.