React 从 child 的 child 调用 parent 方法

Question

我的 React 应用程序遇到了一个小问题。我正在使用 bluprintjs Toaster，无论如何我都需要将它们显示在所有其他组件之上。像这样，如果在登录或注销期间出现错误，即使有重定向，用户也将始终看到 toast。

我的问题是，我有一个中间组件用于保护对未授权用户的访问。

在我的应用程序 class 上，我有一个 Toaster 引用，可以轻松调用 renderToaster 来显示吐司。所以这个方法是正确的。

但是当我将它传递到我的 ProtectedRoute 然后传递到 MyForm 组件时，我无法在 MyFrom 组件中调用它。从 App -> ProtectedRoute -> MyForm 如果我打印 this.props 我可以看到 renderToaster() 方法，但我认为来自 MyFrom -> ProtectedRoute -> App 的 link 不知何故被破坏了，因为在 MyFrom 我有this.toaster 是未定义的错误。

如何调用我的 parent parent 方法。或者我如何在通过 ProtectedRoute 的应用程序和 MyForm compenent 之间创建一个 link？

感谢您的帮助。

我的应用class:

 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>
}

我的保护路由class:

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;

在我的最后一个 class（MyForm 传递给受保护的路由）中，我这样调用我的 renderToaster 方法：

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

Answer 1

您需要在 class 构造函数中绑定 renderToaster：

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

或将 renderToaser 声明为 ES7 class 属性.

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

问题是 renderToaster 中的 this 在将方法传递给子组件时没有指向您认为的位置。如果您使用这些方法中的任何一种，那么 this 将返回到 class.

更多细节参见官方文档：https://reactjs.org/docs/handling-events.html

React 从 child 的 child 调用 parent 方法

React call parent method from child of a child

reactjs

react-router

react-router-v4