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

Question

У меня небольшая проблема с моим приложением реакции.Я использую тостер bluprintjs, и мне нужно отображать их поверх всех остальных компонентов, несмотря ни на что.Например, если во время входа или выхода из системы произошла ошибка, пользователь всегда будет видеть тост, даже если есть перенаправление.

Моя проблема в том, что у меня есть средний компонент, который используется для защиты доступа к пользователю, не прошедшему проверку подлинности..

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

Но когда я передаю его в мой ProtectedRoute, а затем в компонент MyForm, я не могу вызвать его в компоненте MyFrom.Из приложения -> ProtectedRoute -> MyForm, если я распечатаю this.props, я вижу метод renderToaster (), но я думаю, что ссылка из MyFrom -> ProtectedRoute -> App как-то не работает, потому что на MyFrom у меня this.toaster не определеношибка.

Как я могу вызвать родительский родительский метод.Или как создать ссылку между приложением и компонентом MyForm, проходящим через ProtectedRoute?

Спасибо за вашу помощь.

Класс моего приложения:

 class App extends Component {

  renderToaster(intent, message) {
    this.toaster.show({
        intent: intent,
        message: message
    });
  }

  <React.Fragment>
    <NavBarComponent />
        <Switch>
            <ProtectedRoute
                exact
                path="/path1"
                name="path1"
                location="/path1"
                renderToaster={this.renderToaster}
                component={MyForm}
            />
            <ProtectedRoute
                exact
                path="/path2"
                name="path2"
                location="/path2"
                component={params => <MyForm {...params} renderToaster={this.renderToaster} />}
            />
        </Switch>
        <Toaster
            position={Position.BOTTOM}
            ref={element => {
                this.toaster = element;
            }}
        />
  </React.Fragment>
}

Мой класс ProtectedRoute:

import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from '../providers/AuthProvider';

class ProtectedRoute extends Component {
    state = {};

    render() {
        const { component, ...rest } = this.props;
        const Component = component;

        return (
            <AuthContext>
                {({ user }) => {
                    return user ? (
                        <Route render={params => <Component {...params} {...rest} />} />
                ) : (
                        <Redirect to="/" />
                    );
                }}
            </AuthContext>
    );
   }
}

export default ProtectedRoute;

И на моем последнем занятии (MyForm передан защищенному маршруту) я вызываю метод renderToaster следующим образом:

/**
 * Component did Mount
 */
componentDidMount() {
    this.props.renderToaster(Intent.PRIMARY, 'helloo');
}

Answer 1

Вам необходимо либо связать renderToaster в конструкторе класса:

constructor(){
    this.renderToaser = this.renderToaster.bind(this);
}

, либо объявить renderToaser как свойство класса ES7.

renderToaster = (intent, message) => {
    this.toaster.show({
        intent: intent,
        message: message
    });
}

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

Для получения более подробной информации см. Официальные документы: https://reactjs.org/docs/handling-events.html