高阶组件(Lit)

Question

我正在用lit和闹鬼的开发一个web组件库。我需要创建一个临时的，因为我想在将道具传递给我的组件之前更新它们。我试过一些东西，效果很好。

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

但现在，“这个”在我的组件中没有定义。我试着把“这个”绑起来，但什么也没用。“此”仍未定义。

如果有人已经尝试创建更高层次的组件？你能给我举个例子吗？

Answer 1

，但是现在，“这个”在我的组件中是没有定义的。我试着把“这个”绑起来，但什么也没用。“此”仍未定义。

this的问题似乎是在那里使用箭头函数(或者在传递给hoc作为参数的WrappedComponent定义中)。不能为箭头函数绑定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