UPPY.js 图标部分的 HTML 元素未呈现答案

【问题标题】：The HTML elements in the icon section of UPPY.js are not renderedUPPY.js 图标部分的 HTML 元素未呈现
【发布时间】：2020-11-19 09:47:25
【问题描述】：

我正在制作一个自定义插件，但我发现如果我返回一个 html 结构来生成自定义图标，它不会解释 html。

enter image description here

class Cloud extends Plugin {
        
        constructor (uppy, opts) 
        {
            super(uppy, opts)

            this.id = opts.id || 'Cloud' 
            this.title = opts.title || 'Cloud'
            this.type = 'acquirer'
            //this.prepareUpload = this.prepareUpload.bind(this)
            this.icon = () => {
                //aria-controls="uppy-DashboardContent-panel--Cloud"
                console.log('[ pluginCloud ] icon',this);

                let html = `<div>Hola</div>`; 
             
                return html;
            }

            this.defaultLocale = {
                strings: {}
            }

            console.log('[ pluginCloud ] constructor', this);

            this.i18nInit();
            this.install = this.install.bind(this)
            //this.setPluginState = this.setPluginState.bind(this)
            this.render = this.render.bind(this)
        
        }
      
        prepareUpload (fileIDs) {
            console.log('[ pluginCloud ] prepareUpload'); 
            return Promise.resolve()
        }
      
        install () {
            console.log('[ pluginCloud ] install');
            //this.uppy.addPreProcessor(this.prepareUpload)
            const target = this.opts.target
            if (target) {
            this.mount(target, this)
            }
        }
      
        uninstall () {
            console.log('[ pluginCloud ] uninstall');
            //this.uppy.removePreProcessor(this.prepareUpload)
            this.unmount()
        }

        i18nInit () {
            console.log('[ pluginCloud ] Translate');
        }
    }

    let uppy = Uppy.Core();

    // Setting dashboard
    let dashboard = 
    {
        id:'video',
        inline: false,
        target: 'body',
        trigger: '#open_modal_video',
        locale: {strings:UploadFile.LANG_ES},
        metaFields : [ 
            { id :  'name' , name :  'Nombre' , placeholder :  'file name'  }, 
            { id :  'description' , name :  'Descripción' , placeholder :  ''  } 
        ],
        
    }
    

    // Dashboard
    uppy.use(Uppy.Dashboard, dashboard);

    //Custom plugin
    uppy.use(Cloud,{
        target: Uppy.Dashboard,
        companionUrl: 'http://cloud.localhost'
    });

我还注意到，每次单击该按钮时，它都会再次呈现。

我尝试过直接用JS添加html，但没有正确解决问题

【问题讨论】：

是完整的代码
我添加了更多代码。我认为是库本身不允许直接在前端插入插件。而且你必须使用 preact v8.2.9 进行渲染

标签： javascript uppy

【解决方案1】：

我已经能够通过添加额外的 css 来显示图标来解决它

[aria-controls="uppy-DashboardContent-panel--Cloud"]::before
{
  content: '';
  background: #00BCD4;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  overflow: hidden;
}

我需要在“之后”字段中添加一张图片来显示它。

【讨论】：