React-父子组件通信

父组件通过props传递值给子组件

1. 父组件传递数据给子组件，为单项数据流

2. props传地址可以为任意类型

3. props可以设置默认值

   xxx.defaultProps = { name: '张三' }
   

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';


// 定义父组件
class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isActive: true
    }
    // 修改changeActive的this的绑定
    this.changeActive = this.changeActive.bind(this)
  }
  // 编写修改样式的函数
  changeActive () {
    this.setState({
      isActive: !this.state.isActive
    })
  }
  // 返回模板
  render () {
    return (
      <div>
        <button onClick={this.changeActive}>修改</button>
        <Children isActive={this.state.isActive} />
      </div>
    )
  }
}


// 定义子组件
class Children extends React.Component {
  render () {
    // 通过父组件传递的isActive在this.props中
    const classStr = this.props.isActive ? 'active' : 'noActive'
    return (
      <div className={classStr}>
        我是Children元素
      </div>
    )
  }
}

// 渲染父组件
ReactDOM.render(
  <Parent />,
  document.getElementById('root')
)

子组件传递父组件

1. 子组件调用父组件的函数，从而操作父元素的数据，从而实现数据从子组件传递给父组件

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


// 定义父组件
class ParentCOM extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            msg: '我是父组件的文本'
        }
    }
    // 渲染函数，返回模板
    render () {
        return (
            <div>
                <h1>this.state.msg = {this.state.msg}</h1>
                {/* 将函数传递给子组件 */}
                <ChildrenCOM setData={this.setData} />
            </div>
        )
    }
    // 定义设置msg的函数
    setData = (data) => {
        this.setState({
            msg: data
        })
    }
}

// 定义子组件
class ChildrenCOM extends React.Component {
    render () {
        return (
            <div>
                <button onClick={this.sendDate}>发送数据给父组件</button>
            </div>
        )
    }
    sendDate = () => {
        // 调用父组件的函数
        this.props.setData('我是子组件传递给父组件的文本')
    }
}

// 渲染父组件
ReactDOM.render(
    <ParentCOM />,
    document.getElementById('root')
)