Question

我正在尝试创建一个依赖关系非常少的组件，几乎不需要额外的代码即可在另一个组件中使用它。我被困在需要设置状态的地方，因为setState方法需要this上下文。

当前，我正在发送this作为我的库组件中定义的方法的上下文。

export const showSnackbarNotification = (context, msg, variant) => {
  context.setState({
    [`notificationMsg`]: msg, 
    [`notificationToggle`]: true,
    [`variant`]: variant
  })
}

我正在按如下方式调用此函数：

showSnackbarNotification(this, "checking the function", "error");

但是我不希望用户通过方法参数发送this上下文。我有什么办法可以在调用它的上下文中执行该方法。因此showSnackbarNotification的定义变为：

export const showSnackbarNotification = (msg, variant) => {
  this.setState({
    [`notificationMsg`]: msg, 
    [`notificationToggle`]: true,
    [`variant`]: variant
  })
}

并仍然设置我调用showSnackbarNotification方法的Component的状态。

Answer 1

使用常规功能：

export function showSnackbarNotification(msg, variant) {
  this.setState({
    [`notificationMsg`]: msg, 
    [`notificationToggle`]: true,
    [`variant`]: variant
  })
}

调用它时，您可以使用.call来设置上下文：

showSnackbarNotification.call(this, "checking the function", "error");

箭头函数始终具有声明它们的上下文。常规函数采用调用它们的上下文。

Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?

如何在调用位置而不是定义位置的上下文中执行方法？

1 个答案: