react配合modal实现progress进度条

一、简单版，入门

1.学习网址：https://material-ui.com/demos/progress/

2.新建一个test.js

npm install @material-ui/core --save

然后将如下代码复制到test.js上

import React, { Component } from 'react';
import CircularProgress from '@material-ui/core/CircularProgress';
import './test.css'
class test extends Component {
  render(){
    return (
      <div className="progress">
          <CircularProgress className={this.props.progress} />
      </div>
  );
  }
}
export default test;

然后在App.js输入如下代码

import React, { Component } from 'react';
import './App.css';
import Test from './test'
class App extends Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<div className="App">
			<Test />
			</div>
		);
	}
}
export default App;

3.效果图如下，页面内一个圆圈在不断旋转

二、结合modal，一起应用到实际项目中，点击按钮时，旋转

1.学习modal的网址：

https://github.com/reactjs/react-modal

2.仍然使用上面提到的test.js，代码完全相同。

npm install @material-ui/core --save

npm install react-modal --save

然后在App.js输入如下代码

import React, { Component } from 'react';
import './App.css';
import Progress from './test'
import Modal from 'react-modal';
Modal.setAppElement('div');
const customStyles = {
	content: {
		top: '50%',
		left: '50%',
		right: 'auto',
		bottom: 'auto',
		marginRight: '-50%',
		transform: 'translate(-50%, -50%)',
		border: '0'
	}
};
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			modalIsOpen: false
		};
		this.change = this.change.bind(this);
		this.openModal = this.openModal.bind(this);
		this.afterOpenModal = this.afterOpenModal.bind(this);
		this.closeModal = this.closeModal.bind(this);
	}
	openModal() {
		this.setState({ modalIsOpen: true });
	}
	change(){
		this.setState({ modalIsOpen: true });
	}
	afterOpenModal() {
		// this.subtitle.style.color = '#f00';
	}

	closeModal() {
		this.setState({ modalIsOpen: false });
	}
	render() {
		return (
			<div className="App">
				<Modal
				isOpen={this.state.modalIsOpen}
				onAfterOpen={this.afterOpenModal}
				onRequestClose={this.closeModal}
				style={customStyles}
				>
				    <Progress />
				</Modal>
				<button onClick={this.change}>点击显示modal</button>
			</div>
		);
	}
}
export default App;

3.效果图如下：