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

时间:2019-02-16 22:34:28

标签: reactjs react-router react-router-v4

我的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');
}

1 个答案:

答案 0 :(得分: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