React之组件（component）之间的通讯

组件通讯

• 组件是独立封闭的单元
• 一个完整的页面通常是由多个组件组合而成的
• 组件之间经常需要共享一些数据，所以就需要组件之间能够通讯

props

• props 用于接收外界向组件中传递的数据

实现方法：

• 渲染组件时，在组件标签中使用自定义属性向组件内部传递数据
• 组件内部可以使用 props 来接收自定义属性传递的数据
  • 函数组件： props
  • 类组件： this.props

注意事项：

• 除了字符串之外，其他类型的数据都需要使用 {}
• props 是只读属性，不能修改里面的数据
• 使用类组件时，如果写了构造函数，则需要将 props 传递给 super()，否则在 constructor 中无法使用props （其他方法可以使用）

类组件中接收自定义属性中的数据

类组件方式1：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
     
  render () {
     
    return (
      <div>
        大家好，我叫{
     this.props.name},今年{
     this.props.age}岁
      </div>
    )
  }
}

ReactDOM.render(<App name='zs' age={
     18} />,document.querySelector('#app'))

组件内部会议对象形式将数据保存在props属性中

this.props = {
     
	name:'zs',
	age: 18
}

调用组件时，使用自定义属性将数据传递到组件内部
this.props.name this,props.age

类组件方式2：

如果写了构造函数，则需要将props传递给super(),否则在constructor中无法使用props(其他方法可以使用)

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
     
  constructor (props) {
     
    super(props)
    //console.log(this.props)
  }
  render () {
     
    return (
      <div>
        大家好，我叫{
     this.props.name},今年{
     this.props.age}岁
      </div>
    )
  }
}

ReactDOM.render(<App name='zs' age={
     18} />,document.querySelector('#app'))

函数组件中接收自定义属性中的数据

import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => {
     
  reyurn (
      <div>
        大家好，我叫{
     props.name},今年{
     props.age}岁
      </div>
  )
}

ReactDOM.render(<App name='zs' age={
     18} />,document.querySelector('#app'))

父子组件嵌套

在一个组件中可以嵌套另一个组件，外层的组件就是父组件，内层的组件就是子组件

实现方法： 父组件的== render 方法==中调用子组件

import React from 'react';
import ReactDOM from 'react-dom';

import './assets/css/fs.css'

// 创建子组件
class Son extends React.Component {
     
  render () {
     
    return (
      <div className="son">我是子组件</div>
    )
  }
}

// 创建父组件
class Father extends React.Component {
     
  render () {
     
    return (
      <div className="father">
        <div>我是父组件</div>
        {
     /* 父组件在render方法中渲染子组件 */}
        <Son />
      </div>
    )
  }
}

ReactDOM.render(<Father />, document.querySelector('#app'))

父向子传值

父组件渲染子组件时，将state中的数据添加到子组件的自定义属性中

实现要点：

1. 父组件要有state，内部保存准备传递给子组件的数据
2. 父组件调用子组件时，为子组件添加自定义属性，将 state 中的数据设置为属性的值
3. 子组件中使用props接收父组件数据

import React from 'react'
import ReactDOM from 'react-dom'
import './assets/css/fs.css'

// 目标: 子组件接收到父组件的数据

class Son extends React.Component {
     
  render () {
     
    return (
      <div className="son">
        我是子组件<br />
        {
     /* 子组件使用 props 来接收父组件数据 */}
        接收到父组件的数据为: {
     this.props.name} - {
     this.props.age}
      </div>
    )
  }
}

class Father extends React.Component {
     
  state = {
     
    name: '二狗子',
    age: 8
  }
  render () {
     
    return (
      <div className="father">
        我是父组件
        {
     /* 父组件在调用子组件时，将数据通过自定义属性传递给子组件 */}
        <Son name={
     this.state.name} age={
     this.state.age} />
      </div>
    )
  }
}

ReactDOM.render(<Father />, document.querySelector('#app'))