1

我正在开发一个带有lit-HTML和haunted的 Web 组件库。我需要创建一个 HOC，因为我想在将道具传递给我的组件之前更新它们。我尝试了一些东西，效果很好。

const hoc = (WrappedComponent) => (props) => {
  // here I update my props with a custom hooks
  const newProps = useProps(props);
  return WrappedComponent(newProps);
};

但是现在，“this”在我的组件中是未定义的。我尝试绑定“this”，但没有任何效果。“this”仍未定义

如果有人已经尝试创建高阶组件？你能分享我一些例子吗，请

4

1 回答 1

0

但是现在，“this”在我的组件中是未定义的。我尝试绑定“this”，但没有任何效果。“this”仍未定义

问题this似乎是您在那里使用了箭头函数（或者可能在您作为参数WrappedComponent传递的定义中）。hoc您不能绑定this箭头函数，它总是从父范围继承。如果要绑定this（显式或从调用范围），则需要转换为非箭头函数。不确定除此之外您是否还有其他问题，但这可能会让您前进。

这取决于您尝试使用的确切位置this，以及您可能需要从箭头函数转换的位置，但这里有一个示例，说明您如何为共享的代码执行此操作。您可能仍然可以在其中一种或两种情况下使用箭头函数，具体取决于您是否需要在this此处调用。

const hoc = function (WrappedComponent) {
  return function (props) {
    // here I update my props with a custom hooks
    const newProps = useProps(props);
    return WrappedComponent(newProps);
  };
};

您可以从未定义的上下文中共享一段代码this吗？

有关更多信息，请参阅：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#arrow_functions

于 2021-05-06T06:46:04.430 回答