React父子组件之间如何通信
父组件传一个函数给子组件，子组件在适当的时候调用这个函数
React爷孙组件之间如何通信
爷组件把函数传给父组件，父组件把函数传给孙组件
看一个具体的demo吧
这是最终效果
龟兔赛跑
看看具体代码：
html部分
<!DOCTYPE html>
<html lang="zh-CN">
<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>react-demo2龟兔赛跑</title>
<link rel="stylesheet" href="./style.css">
<script src="https://cdn.bootcss.com/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
css部分
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
padding:0 20px;
overflow: hidden
}
.head{
display: flex;
justify-content: center;
}
.track{
border:1px solid black;
}
.playGround{
border:1px solid black;
background:green
}
.referee{
width:50px;
height:50px;
}
js部分
function Rabbit(props){ //兔子
return(
<h1>🐰用时：<span>{props.result}</span></h1>
)
}
function Tortoise(props){ //乌龟
return(
<h1>🐢用时：<span>{props.result}</span></h1>
)
}
function Header(props){
let result1 = props.result1
let result2 = props.result2
return (
<div className='head'>
<Rabbit result={result1}/>
<Tortoise result={result2}/>
</div>
)
}
class Track1 extends React.Component{
constructor(props){
super(props)
let n = 0;
this.state = {
style : {
transform : `translateX(${n}%)`
}
}
let timerId = setInterval(() =>{
n+=10
this.setState({
style:{
transform : `translateX(${n}%)`
}
})
if(n>=100){
window.clearInterval(timerId)
this.props.success('我是小兔子')
}
},1000)
}
render(){
return(
<div>
<div className='play' style={this.state.style}>🐰</div>
<div className='track'></div>
</div>
)
}
}
class Track2 extends React.Component{
constructor(props){
super(props)
let n = 0
this.state = {
style : {
transform : `translateX(${n}%)`
}
}
let timerId = setInterval(() =>{
n += 5
this.setState({
style:{
transform : `translateX(${n}%)`
}
})
if(n>=100){
window.clearInterval(timerId)
this.props.success('我是小乌龟')
}
},1000)
}
render(){
return(
<div>
<div className='play' style={this.state.style}>🐢</div>
<div className='track'></div>
</div>
)
}
}
function Playground(props){
let success1 = props.success1
let success2 = props.success2
return (
<div className='playGround'>
<Track1 success={success1}/>
<Track2 success={success2}/>
</div>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
result1 : 0,
result2 : 0
}
this.t0 = new Date()
}
success1(x){
console.log(x)
let r1 = parseInt((new Date() - this.t0)/1000) + 's'
this.setState({
result1 : r1
})
}
success2(x){
console.log(x)
let r2 = parseInt((new Date() - this.t0)/1000) + 's'
this.setState({
result2 : r2
})
}
render(){
return (
<div>
<Header result1={this.state.result1} result2={this.state.result2} />
<Playground success1={this.success1.bind(this)} success2={this.success2.bind(this)}/>
</div>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('#root')
)
网友评论