React 父向子传值

import React from 'react'

/* 
 实现父子通信中的父传子，把父组件中的数据传给子组件
 实现步骤：
 1.父组件提供要传递的数据 state
 2.给子组件标签添加属性值为satate中的数据
 3.子组件中通过props获取数据
    1.类组件中通过this.props获取
    2.函数组件中通过props获取（需要传参props）
注意事项：
1.props是只读对象，不能进行修改
2.props可以传递任何数据
数字、字符串、布尔值、对象、数组、函数、jsx元素、null、undefined、Symbol类型都可以传递

*/


class App extends React.Component {
  state = {
    message: 'this is message',
    list: [1, 2, 3, 4, 5],
    userInfo: {
      name: '张三',
      age: 18
    }

  }
  getMess = () => {
    console.log('父组件获取子组件传递的数据')

  }

  render () {

    return (
      <div>
        {/* 在子组件上绑定属性 */}
        <SonC msg={this.state.message} ></SonC>
        <SonF list={this.state.list} msg={this.state.message} user={this.state.userInfo} getMess={this.getMess}
          // 传递jxs
          child={<span>this is span</span>}
        />
      </div>
    )
  }
}


class SonC extends React.Component {
  render () {
    return (
      <div >这是类函数子组件,{this.props.msg}</div>
    )
  }
}

function SonF (props) {
  //props是一个对象，里面存着父组件传入的所有数据
  //解构赋值 如果解构赋值，就不需要再使用props.list了，直接使用list
  const { list, msg, user, getMess, child } = props
  return (
    <div>这是函数子组件，{msg},{list.map(item => <p key={item}>{item}</p>)},{user.name}
      <button onClick={getMess}>点击获取父组件传递的数据</button>
      {child}

    </div>
  )
}




export default App