关于react的组件间传参，今天自己全部写了一遍

组件间传参-react props组件间传参

今天很高兴，因为确实对于react用的半知不解的，有些东西很迷茫的，但是又不大好意思麻烦别人，就今天整理出来后就感觉到了很顺畅，很有成就感
忍不住想分享一下，嘻嘻
props是react的三大属性之一，主要用于数据传参
父组件给组件传参：
父组件中在子组件的实例上面泻药传的属性，然后在子组件中直接通过this.props直接接收

---------------父组件
import React, { Component } from 'react'
import Son from './S'
export default class F extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'hello,柒柒',
            title: '这是标题'
        }
    }
    render() {
        return (
            <div>
                <div style={{color:'red'}}>
                    <Son work="工作" name="tom" age={18} />
             </div>
          )
      }
}
----------子组件
import React, { Component } from 'react'
export default class Son extends Component {
    constructor(props) {
        super(props)
        this.state={}
    }
    render() {
        return (
            <div style={{fontSize: '20px', margin:'10px auto', width: '300px', height:'200px', border: '1px dashed red'}}>
                <div>父组件给子组件传值</div>
                <div>
                   <p> {this.props.name} </p>
                   <p> {this.props.work} </p>
                   <p> {this.props.age} </p>
                </div>
            </div>
        )
    }
}

子组件给父组件传参：
在子组件中用函数方法来进行参数的传递，然后将数据在父组件中使用bind绑定this

--------父组件
import React, { Component } from 'react'
import S1 from './S1'
export default class F1 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            email: ''
        }
    }
    handleEmail = (event) => {
        this.setState({
            email: event.target.value
        })
    }
    render() {
        return (
            <div>
                <div>用户邮箱：{this.state.email}</div>
                <S1 name="email" handleEmail={this.handleEmail.bind(this)} />
            </div>
        )
    }
}
-------------子组件
import React, { Component } from 'react'
export default class S1 extends Component {
    render() {
        return (
            <div>
                请输入邮箱：<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
}

兄弟组件间传值
先兄弟组件1传给父组件，本质上就是子组件传给父组件
然后就是父组件传给兄弟组件2，本质上是父组件传给子组件

----------父组件
import React, { Component } from 'react'
import S2 from './S2'
import G from './G'
export default class F2 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: ''
        }
    }
    handValue = (event) => {
        // console.log(event.target.value); //  
        this.setState({
            ...this.state,
            value: event.target.value
        })
    }
    render() {
        return (
            <div>
                <p>父组件：</p>
                <div>父组件中收到来自于兄弟组件1：{this.state.value}</div>
                <S2 handValue={this.handValue.bind(this)} />
                <G value={this.state.value} /> // 父组件传给子组件呢
            </div>
        )
    }
}
------------兄弟组件1
import React, { Component } from 'react'
export default class S2 extends Component {
    render() {
        return (
            <div>
                <p>兄弟组件1：<input onChange={this.props.handValue} /></p>
            </div>
        )
    }
}
------------兄弟组件2
import React, { Component } from 'react'
export default class G extends Component {
    render() {
        return (
            <div>
                <p>兄弟组件2：{this.props.value}</p>
            </div>
        )
    }
}

这些就是我今天写的，写完之后瞬间感觉我不卡了