如何从react接口实例中引用.this？

Question

我正在使用 primereact 组件，其 props 包含一个函数，并且我想使用该函数中的其他 props 之一。总体方案如下：

interface Props {
    label?: string;
    url?: string;
    style?: string;
    action?: (a: FuncArguments): void;
    [key: string]: any;
}

我想做的是这样的：

const myItem : Props {
    label: "AwesomeName",
    style: myStyles.ordinaryItem,
    action: () => {
        someResolver.resolveSomething(this.label);
    }
};

好吧...

this.label

是不可访问的，因为

this

总是未定义的，甚至不能转换为

Props

。

我不是一个 React 奇才，甚至不是一个 JS 奇才，所以这整个情况让我有点困惑。

Answer 1

您面临的问题与

this

在 JavaScript 中的作用域有关，尤其是在箭头函数的上下文中。

interface Props {
    label?: string;
    url?: string;
    style?: string;
    action?: (a: FuncArguments) => void;
    [key: string]: any;
}

const myItem: Props = {
    label: "AwesomeName",
    style: myStyles.ordinaryItem,
    action: function() {
        someResolver.resolveSomething(this.label);
    }
};
//Class component
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myItem = {
            label: "AwesomeName",
            style: myStyles.ordinaryItem,
            action: this.action.bind(this)
        };
    }

    action() {
        someResolver.resolveSomething(this.myItem.label);
    }

    render() {
        // Render your component
    }
}

1. 使用常规函数：当您使用常规函数时，可以将 this 绑定到它，确保它引用正确的上下文。这在需要访问组件属性和方法的类组件中非常有用。

2. 直接传递 Props：如果您在类外部定义对象，则可以直接引用 myItem 的属性，而无需担心 this 上下文。

检查这个。