ReactDOM与表单

[george-wq]

ReactDOM与表单

方法组件: 直接用方法调用组件
适用场景: loading, input, confirm, tooltip, message

组件的挂载: ReactDOM.render(, document.getElementById('root'));
组件的卸载: ReactDOM.unmountComponentAtNode(document.getElementById('root'));

Loading.js

import ReactDOM from "react-dom";
import React from "react";
import './index.css'

class Loading extends React.Component{
	render() {
		return (
			<div className='loading'>
				<div className='loading__mask'></div>
				<div className='loading__content'>
					loading
				</div>
			</div>
		);
	}
}
let node = null
const loading = {
	show() {
		node = document.createElement('div');
		document.body.appendChild(node);
		ReactDOM.render(<Loading />, node);
	},
	hide() {
		if(node) {
			ReactDOM.unmountComponentAtNode(node);
			document.body.removeChild(node);
		}
	}
}

export default loading;

App.js

import React, { Component } from 'react';
import loading from './loading/Loading';
import './App.css';

class App extends Component {
  componentDidMount() {
    // loading
    loading.show();
    setTimeout(() => {
      loading.hide();
    }, 2000);
  }
  render() {
    return (
      <div className="App">
        <button>点我</button>
      </div>
    )
  }
}

export default App;