import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import 'antd/dist/antd.css';
// import DatePicker from 'antd/lib/date-picker'; // 加载 JS
import 'antd/lib/date-picker/style/css';
import Page from './my-content/Page/Page';
import Tab from './my-content/Tabs/Tabs';
import Menus from './my-content/Menu/Menu';
import Moments from './my-content/Moment/Moment';
import Children from './my-content/pass-value/PassValue';
import Son from './my-content/son/Son';
import LuYou from './my-content/Router/Router';
import http from './libs/http';
// import { Provider} from 'mobx-react';
// import appState from './store/app-state'
// import { Provider } from 'mobx-react';
// import appState from './store/store-state'
// export default (props)=>(
// <div className="App">
// <header className="App-header">
// <img src={logo} className="App-logo" alt="logo" />
// <h1 className="App-title">Welcome to React</h1>
// </header>
// <p className="App-intro">
// To get started, edit <code>src/App.js</code> and save to reload.
// </p>
//
// <p>{props.name}</p>
// {props.children}
// </div>
// )
class App extends Component {
constructor(props){
super(props);
///状态
this.state = {
text:'aaa',
email:'',
message:"我是父组件传来的",
};
this.click = this.click.bind(this);
}
///属性 类型
static propTypes = {
};
///属性默认值
static defaultProps = {
};
///已经渲染
componentDidMount() {
//window.onload
setInterval(()=>{
const text = `2333${Math.random()}`;
this.setState({text});
this.setState(()=>{
return {text}
},()=>{
console.log('finish')
});
},1000);
}
///虚拟dom生成 将要渲染
componentWillMount() {
//create
}
///组件更新
componentDidUpdate() {
//update
}
///组价属性更新
componentWillReceiveProps(props,state,contex) {
}
///组件是否更新 返回 true更新
shouldComponentUpdate() {
return true
}
click = (e)=>{
console.log(e, this);
};
handleEmail = (val)=>{
this.setState({email: val});
};
render() {
///跨域问题解决了
class Footer extends React.Component{
async getStudentList(){
const res = await http.post('/app/mobile/login/',{name:'boonook',passworld:'123456'})
console.log(res);
}
componentDidMount(){
this.getStudentList();
}
render(){
return(
<div>axios封装</div>
)
}
}
return(
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<p onClick={this.click.bind(this,'233')}>{this.state.text}</p>
<p>{this.props.name}</p>
{this.props.children}
<div>
<Tab/>
</div>
<div>
<Page/>
{this.props.children}
</div>
<div>
<Menus/>
</div>
<div>
<Moments/>
</div>
<div>
<h3>这里的值是来自于子组件中的：</h3>
<div>用户邮箱：{this.state.email}</div>
<Children name="email" handleEmail={this.handleEmail.bind(this)}/>
</div>
<div>
<h3>父组件向子组件传值</h3>
<div style={{background:"red",padding:"30px"}}>
<Son msg={this.state.message}/>
</div>
</div>
<hr/>
<h2>路由</h2>
<div>
<LuYou/>
</div>
<p>路由问题到此解决</p>
<h1>跨域请求axios</h1>
<div>
<Footer/>
</div>
<p>至此跨域问题完美解决</p>
<hr/>
<div>
<h1>重头戏的Mobx</h1>
</div>
</div>
)
}
}
App.propTypes = {
// name:PropsTypes.String.requir
};
App.defaultProps = {
// name:null
};
export default App;