组件通信- 父子/爷孙

下面通过一个龟兔赛跑案例来帮助理解组件通信
特别说明：
如果组件不需要内部状态就用函数，否则就用class
class组件里的jsx中使用函数必须绑定this，函数组件不需要

1. 简单的龟兔显示

.header{
  display: flex;
  justify-content: center;
}
.track{
  border-bottom: 1px solid black;
}
function App(){
  return (
    <div>
      <div class="header">
        <Time1/>
        <Judge/>
        <Time2/>
      </div>
      <Track1/>
      <Track2/>
    </div>
  )
}
function Time1(){
  return (
    <div>
      <h2>🐇用时</h2>
      <div>0</div>
    </div>
  )
}
function Time2(){
  return (
    <div>
      <h2>🐢用时</h2>
      <div>0</div>
    </div>
  )
}
function Judge(){
  return (
    <div>裁判</div>
  )
}
function Track1(){
  return (
    <div>
      <div>🐇</div>
      <div class="track"></div>
    </div>
  )
}
function Track2(){
  return (
    <div>
      <div>🐢</div>
      <div class="track"></div>
    </div>
  )
}
ReactDOM.render(
  <App />,
  document.querySelector('#root')
)

2. 实现龟兔的移动
   思路：我们需要通过transform:translateX()通过改变百分比来实现他们的移动，这里因为他们的速度要不一样所以需要给这两个分别设置一个自己的属性来控制百分比，因此我们需要使用class

class Track1 extends React.Component{
  constructor(props){
    super(props)
    let n = 0
    this.state = {
      style: {
        transform: `translateX(${n}%)`
      }
    }
    this.timerId = setInterval(()=>{
      n += 10
      this.setState({
        style: {
          transform: `translateX(${n}%)`
        }
      })
      if(n >= 100){
        window.clearInterval(this.timerId)
      }
    },500)
  }
  render(){
    return (
      <div>
        <div style={this.state.style} class="player">🐇</div>
        <div class="track"></div>
      </div>
    )
  }
}

class Track2 extends React.Component{
  constructor(props){
    super(props)
    let n = 0
    this.state = {
      style: {
        transform: `translateX(${n}%)`
      }
    }
    this.timerId = setInterval(()=>{
      n += 5
      this.setState({
        style: {
          transform: `translateX(${n}%)`
        }
      })
      if(n >= 100){
        window.clearInterval(this.timerId)
      }
    },500)
  }
  render(){
    return (
      <div>
        <div style={this.state.style} class="player">🐢</div>
        <div class="track"></div>
      </div>
    )
  }
}

react中动态绑定style就是需要你在state中直接写一个对象，上面的代码可以实现龟兔的移动但是还没办法通知外面你结束了从而外面拿到你的时间，那么我们该如何从外面拿到你结束的时间哪？

3. 拿到龟兔的时间
   父子组件通信：父元素传一个函数给子元素，子元素在恰当的时间调用这个函数

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      t1: 0,
      t2: 0
    }
    this.start = new Date()
  }
  success1(inf){
    let newT = new Date() - this.start
    this.setState({
      t1: newT
    })
    console.log(inf)
  }
  success2(inf){
    let newT = new Date() - this.start
    this.setState({
      t2: newT
    })
    console.log(inf)
  }
  render(){
    return (
      <div>
        <div class="header">
          <Time1 result={this.state.t1}/>
          <Time2 result={this.state.t2}/>
        </div>
        <Track1 success={this.success1.bind(this)}/>
        <Track2 success={this.success2.bind(this)}/>
      </div>
    )
  }
}

function Time1(props){
  return (
    <div>
      <h2>🐇用时</h2>
      <div>{props.result}</div>
    </div>
  )
}
function Time2(props){
  return (
    <div>
      <h2>🐢用时</h2>
      <div>{props.result}</div>
    </div>
  )
}
class Track1 extends React.Component{
  constructor(props){
    super(props)
    let n = 0
    this.state = {
      style: {
        transform: `translateX(${n}%)`
      }
    }
    this.timerId = setInterval(()=>{
      n += 10
      this.setState({
        style: {
          transform: `translateX(${n}%)`
        }
      })
      if(n >= 100){
        window.clearInterval(this.timerId)
        props.success('兔子')
      }
    },500)
  }
  render(){
    return (
      <div>
        <div style={this.state.style} class="player">🐇</div>
        <div class="track"></div>
      </div>
    )
  }
}

class Track2 extends React.Component{
  constructor(props){
    super(props)
    let n = 0
    this.state = {
      style: {
        transform: `translateX(${n}%)`
      }
    }
    this.timerId = setInterval(()=>{
      n += 5
      this.setState({
        style: {
          transform: `translateX(${n}%)`
        }
      })
      if(n >= 100){
        window.clearInterval(this.timerId)
        props.success('乌龟')
      }
    },500)
  }
  render(){
    return (
      <div>
        <div style={this.state.style} class="player">🐢</div>
        <div class="track"></div>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('#root')
)

爷孙组件通信：爷爷把函数传给爸爸，爸爸再把他传给儿子

4. 将跑道封装到一个单独的组件中，然后通过爷孙组件通信拿到时间

class App extends React.Component{
  render(){
    return (
      <div>
        <div class="header">
          <Time1 result={this.state.t1}/>
          <Time2 result={this.state.t2}/>
        </div>
        <Playground success1={this.success1.bind(this)} success2={this.success2.bind(this)}/>
      </div>
    )
  }
}
function Playground(props){
  return (
    <div class="playground">
      <Track1 success={props.success1}/>
      <Track2 success={props.success2}/>
    </div>
  )
}