高阶组件 (lit-html)

问题描述

我正在开发一个带有 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”仍未定义

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

解决方法

但是现在，我的组件中未定义“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