在React中以编程方式显示点燃的web组件

Question

我有一个简单的lit组件，它呈现一个输入框。

import {html} from "lit-element";
import {customElement} from 'lit/decorators.js';
import "./plain-text";

export class MyInputText {
    constructor(args){
        this.args = args;
    }
    
    createPreview(){
        const {
            colorScheme,
            disabled,
            labelText,
            value,
            size,
            customizeStyles
        } = this.args? this.args: {};
        return html`
        <plain-text
                color-scheme="${colorScheme}"
                ?disabled="${disabled}"
                label-text="${labelText}"
                value="${value}"
                size="${size}"
                customizeStyles="${customizeStyles}"></plain-text>
    `;
    }
    
    propertyChanged(propertyName, propertyValue){
        this.args = {...this.args, [propertyName]:propertyValue}
        return this.createPreview();
    }
    
};

我试图使用以下代码以编程方式加载它：

let el = new PlainTextPreviewUI.PlainTextPreview();
el.propertyChanged("width", "300px");
return el;

它返回以下内容：

​

​

有了上面的结果，如何在反应中正确地显示这个web组件？

我试着呈现它，但是它给出了以下错误：

未明错误:对象作为React子对象无效(找到:带有键{字符串、值、类型、处理器}的对象)。如果您打算呈现一个子集合，请使用数组代替。

蒂娅。

Answer 1

React已经对自定义元素提供了一些支持，所以只要加载和注册自定义元素定义，就可以在JSX中使用自定义元素标记名。

如果你不需要担心事件，做下面这样的事情是好的。

import './path/to/plain-text.js';

const ReactComponent = () => {
  const plainTextProps = {
    labelText: 'Text',
    disabled: false,
    customizeStyles: "",
    value:"d"
  }

  return (
    <plain-text {...plainTextProps}></plain-text>
  );
}

但是，如果您需要传递复杂的数据道具或希望以声明方式添加事件侦听器，请考虑使用@点燃-实验室/反应作为Lit组件的React组件包装器。