在 React 中使用 LitElement 绑定到属性

Using Bind to a property from LitElement in React

我有一个使用 litElement 构建的网络组件库。我们在 React 项目中使用这些组件，并且运行使用一些属性绑定属性功能遇到问题。使用以下语法时，React 会抛出错误。

属性绑定示例可以在此处使用
.attr="" 和 ?attr=""
https://lit-element.polymer-project.org/guide/templates

有没有办法在带有前缀“.”的 React 应用程序中使用这些属性绑定？要么 ”？”。我目前知道我们可以使用 JSON.stringify 将对象作为字符串传递给属性，但宁愿将对象作为属性而不是属性传递。

<我的客户组件.model="${this.someObj} ?mybool="false">

Is there a way to use these property bindings inside a React app with a prefixed "." or "?"

简答：没有。

第一个原因是这些语法是特定于 lit 的结构，您只能在其渲染上下文中使用（在 WebComponent 的模板内）。另一个坏消息是 React 的 特有的 视图 DOM 和渲染使其成为最不兼容 WC 的框架之一：你将不得不依赖属性和引用来进行通信使用您的 Web 组件，没有属性和事件绑定。

正如有人已经说过的，您不能在反应文件上使用 lit-element 语法，但是如果您使用 wc-reactify 库（我在我的项目中使用它并且工作得很好），有时在您的 React 应用程序上监听从 Web 组件调度的事件可能是一个解决方案。