Question

我正在开发一个简单的可嵌入窗口小部件，它没有.html文件，只有.js和.css。所有必需的HTML标记都在.js文件中生成。即

function closeWidget() {
  // closeWidget
}

function widgetRenderer() {
  return `
    <div class='widget-header'>
      <span class='widget-close' onclick='closeWidget();'><b>_</b>
    </div>
  `
}

我面临的问题是：将代码段附加到网站后，由于webpack缩小了closeWidget函数名，因此onclick操作将不起作用。我如何告诉webpack运行这些“内联html代码段”并进行修改？甚至有可能吗？

Answer 1

您不能那样做，onclick是一个dom事件，它不是由webpack“运行”的，而是dom本身。因此，将html呈现给浏览器，并且当您单击范围时，将触发该事件，并且浏览器将查找一个名为closeWidget的公开js函数，该函数不存在，因为它在组件范围内，并且不可访问通常。

您不使用什么与jsx正常反应？就像这样简单：

function closeWidget() {
  // closeWidget
}

render() {
  return (
    <div className='widget-header'>
       <span className='widget-close' onClick={this.closeWidget}><b>_</b>
    </div>
  )
}

Webpack：如何解析驻留在js文件中的html模板？

1 个答案: