React Event Listeners для изолированных компонентов - PullRequest
Новая
       5

React Event Listeners для изолированных компонентов

2 голосов
/ 13 января 2020

У меня есть 2 полностью изолированных компонента, в компоненте A я использую прослушиватель события onClick и хочу вызвать некоторую функцию в компоненте B, если событие onClick запущено в компоненте A.

это достижимо оба эти компонента полностью изолированы?

РЕДАКТИРОВАТЬ: если какой-либо из двух файлов является файлом утилит, который является Vanilla js, прямой доступ к контексту будет невозможен и ему придется передавать контекст из Реактивный родительский компонент, вызывающий функцию utils? или передать функцию от родителя для обновления значений контекста?

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

Ответы [ 2 ]

2 голосов
/ 13 января 2020

Существует несколько способов сделать это:

  1. Используя Context api
  2. Используя Redux (в основном, контейнер состояний) для одного и того же: Вы можете запустить действие в ваш компонент и это хранилище доступны и для другого компонента (**** предпочтительно более организованно и хорошо по мере роста приложения)
  3. Определяя функцию для родителя (и обновляя состояние), которая является доступный как для компонента, так и для передачи функции компоненту 1 и передачи состояния в компоненте 2 в качестве реквизита (** следует выбрать для очень маленького приложения, такого как 2-3 страницы)
1 голос
/ 13 января 2020

Вы можете использовать React Context API для решения этой проблемы.

Создатель контекста 


import React from 'react';
import ThemeContext from './ThemeContext';
const A = () => {
  const [someFunction, setSomeFunction] = useState({
    onclick: () => {
      console.log('');
    }
  });
  <ThemeContext.Provider value={someFunction}>
    <D />
  </ThemeContext.Provider>
}

Компонент 1 

import React from 'react';
import ThemeContext from './ThemeContext';
const C1 = () => (
  <ThemeContext.Consumer>
    {value => (
      <button type="button" onClick={value.onclick}>Click</button>
    )}
  </ThemeContext.Consumer>
);

// Компонент 2 

import React from 'react';
import ThemeContext from './ThemeContext';
const C2 = () => (
  <ThemeContext.Consumer>
    {value => (
      <button type="button" onClick={value.onclick}>Click</button>
    )}
  </ThemeContext.Consumer>
);
...