<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// 父组件触发子组件传参
let Father=React.createClass({
hitSon(){
console.log(this)
this.xixi.getStudy()
this.haha.getStudy()
},
render(){
console.log(this)
return(
<div>
我是父组件
<button onClick={this.hitSon}>给儿子来一脚</button>
<hr/>
<Son></Son>
<hr/>
<Son ref='hehe'></Son>
<hr/>
<p>以下两种方法一样</p>
<Son ref={obj=>this.xixi=obj}></Son>
<Son ref={ (obj)=> {
return this.haha=obj
}}></Son>
</div>
)
}
})
let Son=React.createClass({
getInitialState(){
return{
doing:'玩游戏'
}
},
getStudy(){
this.setState({doing:'学习'})
},
render(){
return(
<div>我是子组件
<p>我正在{this.state.doing}</p>
</div>
)
}
})
ReactDOM.render(<Father/>,app)
</script>
</body>
</html>
结果截图：
6091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
