Как добавить прослушиватель событий в React?

Question

Я создаю приложение чата с пользователем и агентом. Я пытаюсь получить сообщения, когда агент отвечает на своем отдельном интерфейсе Rainbow. Проблема в том, что это можно сделать только через прослушиватель событий, как показано в документации. Кто-нибудь может мне помочь, где и как я могу document.addEventListener в React?

Примечание: API-интерфейс getMessageFromConversation () не работает, потому что по умолчанию после просмотра полной истории сообщений вызов этого API-интерфейса вернется ошибка. Я попробовал это.

Заранее спасибо!

Answer 1

Если я понимаю, что вы хотите поместить eventListener в тег.

Код, который я напишу, будет таким (я взял в качестве примера функцию, написанную в do c, который вы связали), Вы должны добавить его в функцию componentDidMount, которая добавит слушателя после монтирования компонента:

import React from 'react';

export default class Example extends React.Component{
    onNewMessageReceived(event) {
        let message = event.detail.message;
        let conversation = event.detail.conversation

        // Do something with the new message received
    };

    componentDidMount(){
        document.addEventListener(rainbowSDK.im.RAINBOW_ONNEWIMMESSAGERECEIVED, onNewMessageReceived);
    }

    render(){
        return(

            <button id="btn">click me!</button>
        )
    }
}

Answer 2

Если вы используете компоненты на основе классов, вы можете использовать componentDidMount и componentWillUnmount для добавления и удаления слушателя соответственно, например:

class Hello extends React.Component {
  doSomething = () => {}

  componentDidMount() {
    window.addEventListener('scroll', this.doSomething)
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.doSomething)
  }
}

Если вы используете хуки, тогда вы можно использовать useEffect для добавления и удаления прослушивателя следующим образом:

function Hello() {
  useEffect(() => {
    const doSomething = () => {};

    window.addEventListener("scroll", doSomething);
    return () => {
      window.removeEventListener("scroll", doSomething);
    };
  }, []);
}

Answer 3

Вы можете добавить eventListener в ответ, делая это в componentDidMount, так что это будет сделано, когда компонент смонтирован.

componentDidMount() {
    document.addEventListener(...)
}