React组件之间的传值

1.父子之间的传值

父传子

父：通过自定义属性进行传值

import React, { Component } from 'react';
import Son from './son'

export default class father extends Component {
    render() {
        return (
            <div>
                <Son toson="给儿子的"></Son>
            </div>
        )
    }
}

子：通过this.props.属性名进行接收

import React, { Component } from 'react'

export default class son extends Component {
    render() {
        return (
            <div>
                {this.props.toson}
            </div>
        )
    }
}

子传父

父

import React, { Component } from 'react';
import Son from './son'

export default class father extends Component {
    getFromSon = (msg)=>{
        //参数来自于儿子的数据 getMeg == getFromSon
        console.log(msg)
    }
    render() {
        return (
            <div>
                <Son getMeg ={this.getFromSon}></Son>
            </div>
        )
    }
}

儿：

import React, { Component } from 'react'


export default class son extends Component {
    toFather=()=>{
        this.props.getMeg('给父亲的数据')
    }
    render() {
        return (
            <div>
                <button onClick={this.toFather}>点击传递数据给父亲</button>
            </div>
        )
    }
}

2.兄弟之间传值

根据父亲作为中间商，将数据定义在父亲身上

父：

import React, { Component } from 'react';
import Sonone from './Sonone'
import Sontwo from './Sontwo'

export default class father extends Component {
    state={
        name:'xx'
    }
    changeName =( name )=>{
        this.setState({
            name
        })
    }
    render() {
        return (
            <div>
                <Sonone name ={this.state.name} changeName= {this.changeName}></Sonone>
                <Sontwo name ={this.state.name}></Sontwo>
            </div>
        )
    }
}

儿

import React, { Component } from 'react'


export default class sonone extends Component {
    change= () =>{
        this.props.changeName('修改的数据')
    }
    render() {
        return (
            <div>
                <button onClick={this.change}>修改数据</button>
            </div>
        )
    }
}

来源：CSDN

作者：大佬养成记

链接：https://blog.csdn.net/qq_42625428/article/details/104315945

标签

react