користувацькі події React.js для спілкування з батьківськими вузлами

Я створюю і прослуховую звичайні DOM CustomEventдля зв'язку з батьківськими вузлами:

У дитини:

  var moveEvent = new CustomEvent('the-graph-group-move', { 
    detail: {
      nodes: this.props.nodes,
      x: deltaX,
      y: deltaY
    },
    bubbles: true
  });
  this.getDOMNode().dispatchEvent(moveEvent);

У батьків:

componentDidMount: function () {
  this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup);
},

Це спрацьовує, але чи існує спосіб реалізації, який був би кращим?

Як зазначено вище:

Шляхом React було б передавати зворотні дзвінки дітям явно через реквізит -. У React немає підтримки користувацьких подій без бульбашок.

Абстракція реактивного програмування ортогональна:

Програмування інтерактивних систем за допомогою шаблону спостерігача є складним та схильним до помилок, але все ще є стандартом реалізації у багатьох виробничих середовищах. Ми представляємо підхід до поступової зневаги спостерігачів на користь реактивних абстракцій програмування. Кілька шарів бібліотеки допомагають програмістам плавно перенести існуючий код із зворотних викликів на більш декларативну модель програмування.

Філософія React базується на шаблоні Command:

Список літератури

• Знищення шаблону спостерігача
• Шаблон команди: Історія команд
• Взаємодія компонентів з React та користувацькими елементами
• Створення Redux на TypeScript
• Чим Мітрил відрізняється від інших систем - Мітріл

Ви можете написати просту послугу, а потім скористатися нею

/** eventsService */
module.exports = {
  callbacks: {},

  /**
   * @param {string} eventName
   * @param {*} data
   */
  triggerEvent(eventName, data = null) {
    if (this.callbacks[eventName]) {
      Object.keys(this.callbacks[eventName]).forEach((id) => {
        this.callbacks[eventName][id](data);
      });
    }
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   * @param {Function} callback
   */
  listenEvent(eventName, id, callback) {
    this.callbacks[eventName][id] = callback;
  },

  /**
   * @param {string} eventName name of event
   * @param {string} id callback identifier
   */
  unlistenEvent(eventName, id) {
    delete this.callbacks[eventName][id];
  },
};

приклад (те саме для спрацьовування)

import eventsService from '../../../../services/events';
export default class FooterMenu extends Component {
  componentWillMount() {
    eventsService
      .listenEvent('cart', 'footer', this.cartUpdatedListener.bind(this));
  }

  componentWillUnmount() {
    eventsService
      .unlistenEvent('cart', 'footer');
  }

  cartUpdatedListener() {
    console.log('cart updated');
  }
}

Ви можете пускати події через зворотні дзвінки, передані через контекст: [CodePen]

import * as React from 'react';

const MyEventContext = React.createContext(() => {});

const MyEventBubbleContext = ({children, onMyEvent}) => {
  const bubbleEvent = React.useContext(MyEventContext);
  const handleMyEvent = React.useCallback((...args) => {
    // stop propagation if handler returns false
    if (onMyEvent(...args) !== false) {
      // bubble the event
      bubbleEvent(...args);
    }
  }, [onMyEvent]);
  return (
    <MyEventContext.Provider value={handleMyEvent}>
      {children}
    </MyEventContext.Provider>
  );
};

const MyComponent = () => (
  <MyEventBubbleContext onMyEvent={e => console.log('grandparent got event: ', e)}>
    <MyEventBubbleContext onMyEvent={e => console.log('parent got event: ', e)}>
      <MyEventContext.Consumer>
        {onMyEvent => <button onClick={onMyEvent}>Click me</button>}
      </MyEventContext.Consumer>
    </MyEventBubbleContext>
  </MyEventBubbleContext>
);

export default MyComponent;

Є ще один, який я знайшов, який є також цілком розумним, особливо якщо свердління отворів від батьків до дитини вже стає громіздким. Він назвав це менш простим спілкуванням. Ось посилання:

https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md

Можливе рішення, якщо вам абсолютно необхідно вдатися до шаблону Observer у програмі ReactJs, ви можете захопити звичайну подію. Наприклад, якщо ви хочете, щоб клавіша видалення викликала <div>те, що позначено для видалення, ви можете мати <div>прослуховування події зниження клавіш, яка буде викликана customEvent. Зафіксуйте клавіатуру на тілі та customEventнадішліть подію клавіатури на вибране <div>. Ділимось на випадок, якщо це комусь допоможе.

Центральний магазин [Redux], який роздає стан клієнтам, а потім стан відправлення назад до магазину також нагадує шаблон спостерігача. Спосіб зробити публікацію / передплату лише гірший через явні (крихкі?) Накладні витрати на підключення реквізиту / подій. Для злому через ієрархію React забезпечує контекст (шаблон постачальника) або спостережувані бібліотеки, які смердять. Як MobX, що представляє нові декоратори @observable, або Vue, що вводить новий синтаксис шаблону "v-if". Події і так є основним способом роботи DOM і циклу подій javascript, так чому б і ні? Думаю, це зробили сатаністи. Лол

Я усвідомлюю, що це питання на сьогодні досить давнє, але ця відповідь все одно може комусь допомогти. Я написав прагму JSX для React, яка додає декларативну власну подію: jsx-native-events .

В основному ви просто використовуєте onEvent<EventName>шаблон, щоб спостерігати за подіями.

<some-custom-element onEventSomeEvent={ callback }></some-custom-element>