React/practise/18.父传子通信.jsx

import React from 'react'
// App 为父组件，Son 为子组件

// 函数式的 Son
function SonF(props) {
  // props 是一个对象，里面存着通过父组件传入的所有数据
  return <div>函数子组件，{props.msg}</div>
}

// 类组件的 Son
class SonC extends React.Component {
  render() {
    return (
      // 类组件必须通过 this 关键词去获取,这里的 props 是固定的
      <div>类子组件，{this.props.msg}</div>
    )
  }
}

// 类组件的 App
class App extends React.Component {
  // 准备数据
  state = {
    message: 'this is message',
  }
  render() {
    return (
      <div>
        {/* 在子组件身上绑定属性，属性名可以自定义，保持语义化 */}
        <SonF msg={this.state.message} />
        {/* msg 是属性 */}
        <SonC msg={this.state.message} />
      </div>
    )
  }
}

export default App