React
Связь между компонентами

замечания

Компоненты от родителя к ребенку

Что самый простой случай на самом деле, очень естественный в мире React, и шансы - вы уже используете его.

Вы можете передать реквизиты до дочерних компонентов . В этом примере message является опорой, которую мы передаем дочернему компоненту, имя сообщения выбрано произвольно, вы можете называть его всем, что хотите.

import React from 'react';

class Parent extends React.Component {
    render() {
        const variable = 5;
        return (
            <div>
                <Child message="message for child" />
                <Child message={variable} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return <h1>{this.props.message}</h1>
    }
}

export default Parent;

Здесь компонент <Parent /> отображает два компонента <Child /> , передавая message for child элемента внутри первого компонента и 5 внутри второго.

Итак, у вас есть компонент (родительский), который отображает еще один (дочерний) и передает ему некоторые реквизиты.

Ребенок к родительским компонентам

Отправка данных обратно родительскому, для этого мы просто передаем функцию в качестве опоры из родительского компонента в дочерний компонент , а дочерний компонент вызывает эту функцию .

В этом примере мы изменим состояние родителя, передав функцию дочернему компоненту и вызывая эту функцию внутри дочернего компонента.

import React from 'react';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };

        this.outputEvent = this.outputEvent.bind(this);
    }
    outputEvent(event) {
        // the event context comes from the Child
        this.setState({ count: this.state.count++ });
    }

    render() {
        const variable = 5;
        return (
            <div>
                Count: { this.state.count }
                <Child clickHandler={this.outputEvent} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <button onClick={this.props.clickHandler}>
                Add One More
            </button>
        );
    }
}

export default Parent;

Обратите внимание, что метод родительского метода outputEvent (который изменяет состояние родителя) вызывается outputEvent кнопкой onClick .

Не связанные компоненты

Единственный способ, если ваши компоненты не имеют отношения родитель-ребенок (или связаны друг с другом, но слишком дальше, например, гранд-гроссмейстер), должен иметь какой-то сигнал, который один компонент подписывает, а другой записывает.

Это две основные операции любой системы событий: подписаться / прослушать событие, которое будет уведомляться, и отправить / запустить / опубликовать / отправить событие, чтобы уведомить тех, кто хочет.

Для этого есть как минимум 3 шаблона. Вы можете найти сравнение здесь .

Вот краткое резюме:

• Шаблон 1: Излучатель событий / Целевой / Диспетчер : слушатели должны ссылаться на источник для подписки.

  • подписаться: otherObject.addEventListener('click', () => { alert('click!'); });
  • для отправки: this.dispatchEvent('click');

• Шаблон 2: Публикация / Подписка : вам не нужна конкретная ссылка на источник, который запускает событие, есть глобальный объект, доступный везде, который обрабатывает все события.

  • подписаться: globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • для отправки: globalBroadcaster.publish('click');

• Шаблон 3: Сигналы : похожие на Event Emmit / Target / Dispatcher, но здесь вы не используете никаких случайных строк. Каждый объект, который может генерировать события, должен иметь определенное свойство с этим именем. Таким образом, вы точно знаете, какие события могут излучать объекты.

  • подписаться: otherObject.clicked.add( () => { alert('click'); });
  • отправить: this.clicked.dispatch();