父传子实现

父传子实现

目标任务: 实现父子通信中的父传子，把父组件中的数据传给子组件

实现步骤

父组件提供要传递的数据 - state

给子组件标签添加属性值为 state中的数据

子组件中通过 props 接收父组件中传过来的数据

类组件使用this.props获取props对象

函数式组件直接通过参数获取props对象

import React from 'react'

// 函数式子组件

function FSon(props) {

  console.log(props)

  return (

    <div>

      子组件1

      {props.msg}

    </div>

  )

}

// 类子组件

class CSon extends React.Component {

  render() {

    return (

      <div>

        子组件2

        {this.props.msg}

      </div>

    )

  }

}

// 父组件

class App extends React.Component {

  state = {

    message: 'this is message'

  }

  render() {

    return (

      <div>

        <div>父组件</div>

        <FSon msg={this.state.message} />

        <CSon msg={this.state.message} />

      </div>

    )

  }

}

export default App

props说明

目标任务: 知道props传递时的一些注意事项

1. props是只读对象（readonly）

根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改

2. props可以传递任意数据

数字、字符串、布尔值、数组、对象、函数、JSX

class App extends React.Component {

  state = {

    message: 'this is message'

  }

  render() {

    return (

      <div>

        <div>父组件</div>

        <FSon

          msg={this.state.message}

          age={20}

          isMan={true}

          cb={() => { console.log(1) }}

          child={<span>this is child</span>}

        />

        <CSon msg={this.state.message} />

      </div>

    )

  }

}