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

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>
  )
}