react-----父子传递

父传子 通过props传递

父组件的所有数据都可以通过props传递给子组件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Son extends Component{
    constructor(props,context){
        super()
    }
    render(){
        return(){
            <div>
            <p>{this.props.data}</p>
            </div>
        }
    }
}

class Panel from Component{
    render(){
        return(
      <div>
      <p>这是父组件</p>
      <Son data = {this.props.min}/>
      </div>
        )
    }
    let data = {
        news:'好',
        min:13
    }
}
ReactDOM.render(<Panel {...data} />, document.getElementById('root')

子传父

React 是单向数据流 所以数据只能从父组件传递给子组件,子组件如果想修改父组件的数据，父组件在使用子组件的时候，通过 props 传给子组件一个可以修改父组件的方法，当子组件需要修改父组件的数据时，通过 this.props 找到这个方法执行对应的方法

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import 'bootstrap/dist/css/bootstrap.css'

class Panel extends Component {
  static defaultProps = {
  <!--赋默认值-->
    a: 1
  }
  constructor () {
    super()

    this.state = {
    <!--初始化私有属性-->
      color: 'success'
    }
  }
<!--修改方法-->
  changeColor = (color) => {
    this.setState({
      color
    })
  }

  render () {
    return (<div className="container">
      <div className={`panel panel-${this.state.color}`}>
        <div className="panel-heading">
          {this.props.head}
        </div>
        <div className="panel-body">
          {this.props.body}
        </div>
        {/*通过 modifyColor 这个 props 把 Panel 组件的 changeColor 方法传递给 Footer 组件*/}
        <Footer type={this.state.color}
                modifyColor={this.changeColor} />
      </div>
    </div>)
  }
}

class Footer extends Component {
  change = () => {
    this.props.modifyColor('danger')
  }
  render () {

    return (<div className="panel-footer">
      <button className={`btn btn-${this.props.type}`} onClick={this.change}>变色</button>
    </div>)
  }
}
ReactDOM.render(<Panel head="头信息" body="信息主体"/>, document.getElementById('root'))