龟兔赛跑范例

---

简单父子组件通信

天气信息传递：
效果展示

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '数据还未到'
    }
  }
  changeMsg() {
    this.setState({
      message: '今天天气很好'
    })
  }
  render() {
    return (
      <div>
        <h1>hello 今天天气怎么样</h1>
        <Tianqi message={this.state.message} fn={this.changeMsg.bind(this)}></Tianqi>
      </div>
    )
  }
}

function Tianqi(props) {
  return ( 
    <div>
      <p>{props.message}</p>
      <button onClick={props.fn}>click</button>
    </div>
  )
}

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

图片.png