Comunicação entre componentes no React (componentes pai-filho, componentes de nível cruzado, componentes não relacionados)

Language 2023-10-05 00:22:13 views: null

Índice

Comunicação entre componentes pai e filho

O componente pai passa dados e métodos para o componente filho

O componente pai obtém dados e métodos do componente filho

Comunicação entre componentes de nível cruzado

Use adereços para implementar a comunicação de componentes entre níveis

Usando contexto para implementar comunicação de componentes entre níveis

Usando gerenciamento de estado para implementar comunicação de componentes entre níveis

Comunicação entre componentes não relacionados

Use EventEmitter para implementar a comunicação entre componentes não relacionados

 Use gerenciamento de estado para comunicação entre componentes independentes

Suplemento: Implemente você mesmo um EventEmitter

Comunicação entre componentes pai e filho

O componente pai passa dados e métodos para o componente filho

O componente pai pode passar dados e métodos para o componente filho, e o componente filho os obtém por meio de adereços.

Componente pai:

import React from "react";
import Child from "./Child";
export default class Demo extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            value: 0
        }
        this.changeValue = this.changeValue.bind(this)
    }

    changeValue() {
        this.setState({
            value: this.state.value + 1
        }, () => {
            console.log('changeValue 方法执行了 value: ', this.state.value)
        })
    }

    render() {
        const value = this.state.value
        return (
            <div>
                <h1>父组件</h1>
                <p>value: {value}</p>
                <Child
                    // 向子组件传递数据
                    value={value}
                    // 向子组件传递方法
                    changeValue={this.changeValue}
                ></Child>
            </div>
        )
    }
}

Submontagem:

import React from "react";
export default class Child extends React.Component {

    constructor(props) {
        super(props)
    }
    dealClidk() {
        // 子组件触发父组件的方法执行
        this.props.changeValue()
    }
    render() {
        return (
            <div>
                <h1>子组件</h1>
                {/* 子组件通过props获取父组件传递的数据 */}
                <p>value:{this.props.value}</p>
                <button onClick={this.dealClidk.bind(this)}>点击</button>
            </div>
        )
    }
}

 

Quando o botão no componente filho é clicado, o valor da propriedade no componente pai pode ser alterado acionando o método do componente pai. 

O componente pai obtém dados e métodos do componente filho

O componente pai pode obter os dados e métodos do componente filho por meio da ref.

Componente pai:

import React from "react";
import Child from "./Child";
export default class Demo extends React.Component {

    constructor(props) {
        super(props)
        this.ChildRef = React.createRef()
    }

    dealClidk() {
        if (this.ChildRef && this.ChildRef.current) {
            // 父组件触发子组件方法的执行
            this.ChildRef.current.changeValue()
        }
    }
    getData() {
        if (this.ChildRef && this.ChildRef.current) {
            // 父组件获取子组件中state的值
            const childData = this.ChildRef.current.state.data
            console.log('获取子组件的数据 childData: ', childData)
        }
    }

    render() {
        return (
            <div>
                <h1>父组件</h1>
                <button onClick={this.dealClidk.bind(this)}>点击</button>
                <button onClick={this.getData.bind(this)}>获取</button>
                <Child ref={this.ChildRef}></Child>
            </div>
        )
    }
}

Submontagem:

import React from "react";
export default class Child extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: 0
        }
        this.changeValue = this.changeValue.bind(this)
    }

    changeValue() {
        this.setState({
            data: this.state.data + 1
        }, () => {
            console.log('changeValue 方法执行了 data: ', this.state.data)
        })
    }

    render() {
        const data = this.state.data
        return (
            <div>
                <h1>子组件</h1>
                <p>value:{data}</p>
            </div>
        )
    }
}

Comunicação entre componentes de nível cruzado

Use adereços para implementar a comunicação de componentes entre níveis

Existem também duas maneiras de usar adereços para obter comunicação entre componentes entre níveis.

Transferência direta nível por nível

Componente pai: 

import React from "react";
import Child from "./Child";
export default class Demo extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            value: 0,
            value2: '张三'
        }
        this.changeValue = this.changeValue.bind(this)
    }

    changeValue() {
        this.setState({
            value: this.state.value + 1
        }, () => {
            console.log('changeValue 方法执行了 value: ', this.state.value)
        })
    }

    render() {
        const { value, value2 } = this.state
        return (
            <div>
                <h1>父组件</h1>
                <p>value: {value}</p>
                <p>value2: {value2}</p>
                <button onClick={this.changeValue}>点击</button>
                <Child
                    value={value}
                    value2={value2}
                ></Child>
            </div>
        )
    }
}

 Submontagem:

import React from "react";
import GrandSon from "./GrandSon";
export default class Child extends React.Component {

    render() {
        const { value, value2 } = this.props
        return (
            <div>
                <h1>子组件</h1>
                <GrandSon
                    // 子组件将数据继续向下传递
                    value={value}
                    value2={value2}
                ></GrandSon>
            </div>
        )
    }
}

Componente Sun Tzu

import React from "react";
export default class GrandSon extends React.Component {

    constructor(props) {
        super(props)
    }
    render() {
        const { value, value2 } = this.props
        return (
            <div>
                <h1>孙子组件</h1>
                <p>value: {value}</p>
                <p>value2: {value2}</p>
            </div>
        )
    }
}

Este método é adequado para transferir menos dados e pode ser transferido um por um. Se houver muitos dados a serem transferidos, o uso deste método causará facilmente a duplicação do código. Podemos usar {...this.props} para empacotar e passar. Não importa quantos dados sejam passados ​​​​pelo componente pai, o componente filho irá empacotar todos os dados e passá-los para o componente neto, e o componente neto ainda poderá usar this.props para obtê-los.

Vamos modificar o método de entrega dos subcomponentes;

import React from "react";
import GrandSon from "./GrandSon";
export default class Child extends React.Component {

    render() {
        return (
            <div>
                <h1>子组件</h1>
                <GrandSon
                    // 子组件将数据继续向下传递
                    {...this.props}
                ></GrandSon>
            </div>
        )
    }
}

 

Você pode ver que o mesmo efeito é alcançado.

Usando contexto para implementar comunicação de componentes entre níveis

Usar o contexto para transferir dados entre níveis requer as seguintes etapas:

1. Crie uma instância de contexto por meio de React.createContext()

import React from "react";
const DemoContext = React.createContext()

export default DemoContext;

2. Crie um produtor através do provedor. O provedor possui um atributo de valor que pode ser usado para empacotar os dados que precisam ser passados.

import React from "react";
import Child from "./Child";
import DemoContext from './DemoContext'
export default class Demo extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            value: 0,
            value2: '张三'
        }
        this.changeValue = this.changeValue.bind(this)
    }

    changeValue() {
        this.setState({
            value: this.state.value + 1
        }, () => {
            console.log('changeValue 方法执行了 value: ', this.state.value)
        })
    }

    render() {
        const { value, value2 } = this.state
        return (
            <div>
                <h1>父组件</h1>
                <p>value: {value}</p>
                <p>value2: {value2}</p>
                <button onClick={this.changeValue}>点击</button>
                <DemoContext.Provider value={
   
   {
                    value: value,
                    value2: value2
                }}>
                    <Child></Child>
                </DemoContext.Provider>
            </div>
        )
    }
}

3. Crie um consumidor através do Consumidor para receber os dados passados

import React from "react";
import DemoContext from "./DemoContext";
export default class GrandSon extends React.Component {

    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <h1>孙子组件</h1>
                <DemoContext.Consumer>
                    {/* Consumer中需要使用函数 */}
                    {
                        (value) => {
                            return (
                                <div>
                                    <p>value: {value.value}</p>
                                    <p>value2: {value.value2}</p>
                                </div>
                            )
                        }
                    }
                </DemoContext.Consumer>
            </div>
        )
    }
}

Componentes intermediários:

import React from "react";
import GrandSon from "./GrandSon";
export default class Child extends React.Component {

    render() {
        return (
            <div>
                <h1>子组件</h1>
                <GrandSon></GrandSon>
            </div>
        )
    }
}

Usando gerenciamento de estado para implementar comunicação de componentes entre níveis

Você pode consultar o blog anterior: React-redux gerenciamento de estado global

Comunicação entre componentes não relacionados

Use EventEmitter para implementar a comunicação entre componentes não relacionados

Passos para usar EventEmitter;

1. Instale a biblioteca de eventos

npm install events

2. Crie uma instância de EventEmitter

import React from "react";
import { EventEmitter } from "events";
// 创建EventEmitter实例
const DemoEvent = new EventEmitter()
export default DemoEvent;

3. Lançamento de eventos

Use emit("nome do evento", parâmetros) para publicar eventos

import React from "react";
import DemoEvent from './DemoEvent'
export default class GrandSon extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 0
        }
        this.changeValue = this.changeValue.bind(this)
    }

    changeValue() {
        this.setState({
            value: this.state.value + 1
        }, () => {
            console.log('changeValue 方法执行了 value: ', this.state.value)
            // 发送一个事件
            DemoEvent.emit('sendData', this.state.value)
        })
    }

    render() {
        return (
            <div>
                <h1>孙子组件 GrandSon</h1>
                <p>{this.state.value}</p>
                <button onClick={this.changeValue}>点击</button>
            </div>
        )
    }
}

 4. Inscreva-se em eventos

Para assinar eventos, você pode usar addListener("event name", callback function) ou on("event name", callback function)

5. Cancelar assinatura

Para cancelar a assinatura, você pode usar removeListener("event name", callback function) ou off("event name", callback function)

import React from "react";
import DemoEvent from './DemoEvent'
export default class GrandSon2 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: 0
        }
        this.receiveData = this.receiveData.bind(this)
    }

    componentDidMount() {
        // 订阅事件
        DemoEvent.addListener('sendData', this.receiveData)
    }

    receiveData(data) {
        console.log('接收的数据 data: ', data)
        this.setState({
            value: data
        })
    }

    componentWillUnmount() {
        // 取消订阅
        DemoEvent.removeListener(this.receiveData)
    }

    render() {
        return (
            <div>
                <h1>孙子组件 GrandSon2</h1>
                <p>{this.state.value}</p>
            </div>
        )
    }
}

 

 Use gerenciamento de estado para comunicação entre componentes independentes

Você pode consultar o blog anterior: React-redux gerenciamento de estado global

Suplemento: Implemente você mesmo um EventEmitter

continua

Acho que você gosta

Origin blog.csdn.net/Celester_best/article/details/126218290
Recomendado
Clasificación
Diario
Más
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(0)
2024-06-03(0)

Code World

© 2018 codetd.com