在组件外使用 html 函数返回 [object Object] LitElement

如何解决在组件外使用 html 函数返回 [object Object] LitElement

我对此很头疼，如果有人知道如何解决它，那就太棒了。 我正在使用 LitElement 创建一个表格组件，想要使用它的开发人员可以添加一个 customHTML 来呈现不同的输入。 为此，他/她可以使用属性“标题”，如下所示：

[{
  label: 'Created at',customHTML: (value,isEditable) => html`<custom-element .value="${value} .isEditable="${valueisEditable}"></custom-element>`
}]

使用内部组件：

<td>${header.customHTML()}</td>

我面临的问题是，当我尝试在我的表格组件中使用这个 customHTML 时，它返回 [object Object]。你对此有什么解释吗？有没有可能解决这个问题？

谢谢！

解决方法

[object Object] 是转换为字符串的对象的默认表示。

const house = {
  windows: 4,height: 5
}

console.log(house.toString());

自定义 html 元素是您在 <td> 标记内引用的对象，它可能试图将其转换为字符串。

,

没有多少代码可以真正理解问题，但请尝试使用 var a = "hello1"; var b = "hello2"; console.log("a < a?" + (a < a) + "|"); console.log("a < b?" + (a < b) + "|"); console.log("a > b?" + (a > b) + "|"); console.log("b > a?" + (b > a) + "|");。

作为字符串打印为文本会更灵活。

,

这是因为您使用了许多版本的 lit-element。

输入 chrome 控制台 window.litElementVersions，您将看到您使用的是哪些版本的 lit 元素。

如果您将来自不同版本的不同导入的 html 标签混在一起，您将得到 [object Object]。

解决办法

这里没有魔法或要做很多事情。 重新安装所有软件包

rm -rf node_modules yarn.lock package-lock.json
npm i
# or
yarn install