<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
/* function Son(props){
return(
<div>
<p>你好啊</p>
{props.parname}
</div>
)
}; */
class Son extends React.Component{
constructor(props){
super(props);
};
componentDidMount(){
this.callback()
}
callback(){
console.log(this.props)
}
render(){
return(
<div>
<button onClick={()=>this.props.show('bai')}>你好啊</button>
<button onClick={()=>this.callback()}>yellow</button>
{this.props.parname}
</div>
)
}
}
//如果这里要用onClick={this.callback}的话，它的就会报错很多时候()=>see()表示一个函数
class App extends React.Component{
constructor(props){
super(props)
this.state={
name:'lishishi'
}
}
hand(e){
this.setState({
name:e
})
}
render(){
let name='lishishi';
return(
<div>
<p>66666</p>
<Son parname={this.state.name} show={(e)=>this.hand(e)} />
</div>
)
}
}
window.onload=function(){
let titl =document.getElementById("div1");
ReactDOM.render(
<App/>,
titl
)
}
//document.getElementById()
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>