Question

我具有以下组件：

import React from 'react';
import {Route, Redirect} from 'react-router-dom';
import {isAuthenticated} from "../../helpers/auth_utils";

const PrivateRoute = ({component, ...rest}) => {
    //TODO how these two component's are different?
    let {component: Component, ...componentProps} = this.props;

    return (<Route {...rest} render={props => {
        if (isAuthenticated()) {
            return <Component component={component} {...componentProps}/>;
        } else {
            return <Redirect to={{pathname: '/login', state: {from: props.location}}}/>;
        }
    }
    }/>);
};

export default PrivateRoute;

奇怪的是，此组件中未定义this。我在这里做错了什么？

Answer 1

箭头functinos没有自己的this。他们得到的范围就在它们之上，这里的范围是Window，但是在严格模式下，javascript不想意外使用window，因此将它们设为未定义。因此this是不确定的。

您可以尝试将PrivateRoute包装到一个类中，然后您会看到this将是该类。

要让您的函数创建自己的上下文，您需要将其从箭头函数更改为常规函数。

const PrivateRoute = function({component, ...rest}) {

Answer 2

箭头功能没有自己的“ this”。当您从此类函数引用this时，它就是从外部“常规”函数中提取的。

从MDN，

箭头函数表达式的语法比函数短表达式，并且没有自己的this，arguments，super或新目标。这些函数表达式最适合非方法函数，它们不能用作构造函数。

let user = {
  firstName: "Arian",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Arian

Answer 3

this关键字不涉及箭头功能。它是指常规功能。

根据您的情况，您可以执行以下操作

const PrivateRoute = (props) => { //TODO how these two component's are different? let {component: Component, ...componentProps} = props;

确保道具中可以使用component和componentProps。

在React组件中未定义“ this”

3 个答案: