Question

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

我的问题是，我有一个中间组件，用于保护对未经身份验证的用户的访问。

在我的应用程序类上，我有一个Toaster的引用，可以轻松地调用renderToaster来显示吐司。因此该方法正常工作。

但是当我将其传递给我的ProtectedRoute，然后传递给MyForm组件时，无法在MyFrom组件中调用它。从应用程序-> ProtectedRoute-> MyForm，如果我打印this.props，我可以看到renderToaster（）方法，但是我认为MyFrom-> ProtectedRoute-> App的链接以某种方式被破坏了，因为在MyFrom上，我的this.toaster是未定义的错误。

如何调用我的父父方法。还是如何通过ProtectedRoute在应用程序和MyForm组件之间创建链接？

谢谢您的帮助。

我的应用程序类别：

 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传递到受保护的Route）上，我这样调用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

从孩子的孩子反应调用父方法

1 个答案: