Взаимодействие между React компонентами

От родителя к дочернему компоненту

Основные направление передачи данных - от родительского компонента к дочернему. В этой ситуации все просто- передаем параметры через props:

import React, {Component} from "react";
import {View, Text} from "react-native"

class Parent extends React.Component{

    state = {
        text: 'test'
    };
    
    render() {
        return(
            <Child text={this.state.text} />
        )
    }
}

class Child extends React.Component{
    constructor(props) {
        super(props)
    }
    
    render() {
        return(
            <View>
                <Text>
                    {this.props.text}
                </Text>
            </View>
        )
    }
}

В родительском компоненте определяем state и передаем его свойство в дочерний компонент. Теперь при обновлении родителя, так же будет обновляться текст и у дочернего компонента.

От дочернего компонента к родителю

В данном случае нужно создать вспомогательную функцию у родителя

import React, {Component} from "react";
import {View, Button} from "react-native"

class Parent extends React.Component{

    constructor(props) {
        super(props);
        this.update = this.update.bind(this);
    }
    
    update(params) {
        //Некий полезный код, например this.setState
    }

    render() {
        return(
            <Child update={this.update} />
        )
    }
}

class Child extends React.Component{
    constructor(props) {
        super(props)
    }

    render() {
        return(
            <View>
                <Button title={'Click me'} onPress={this.props.update('param')}/>
            </View>
        )
    }
}

Созданную у родителя функцию нужно привязать к к нему, для этого вызывается функция bind в конструкторе. Далее функцию передаем в props дочернего элемента, где вызываем ее по некоему событию.

Между соседями

Для общения между соседями так же понадобиться дополнительная функция

import React, {Component} from "react";

function updateState(state) {
    this.setState(state);
}

class Neighbour1 extends React.Component{
    constructor(props) {
        super(props);
        updateState = updateState.bind(this);
    }
}

class Neighbour2 extends React.Component{
    componentDidMount() {
        updateState({key:'value'})
    }
}

Функция обьявляется вне классов, но привязывается к одному из компонентов функцией bind в конструкторе. Затем в соседнем компоненте можно вызвать данную функцию в контекте первого компонента.

Теги: