Дано:
- Простое reactjs-приложение с 3 компонентами, основанное на
<div id="reactRoot"></div>
и добавляющее глобальную js-функцию:
export default class SelectPanel extends Component {
constructor( props ){
super( props )
window.showLayerSelection = this.loadData
}
loadData = () => { doSomeStuff() }
}
- Задачи Gradle для запуска
npm run-script build
и копирования ресурсов в jar-файл - Создайте файл
wro.xml
, например:
<groups ...>
<group name="layer-selection">
<js>classpath:webapp/layer-selection/2.5399c7c7.chunk.js</js>
<js>classpath:webapp/layer-selection/main.1ea18d69.chunk.js</js>
<js>classpath:webapp/layer-selection/runtime-main.989054bd.js</js>
</group>
</groups>
- Включите группу в рендер головы:
@Override
public void renderHead(final IHeaderResponse response) {
super.renderHead(response);
response.render(JavaScriptHeaderItem.forUrl(getApplication().buildWro4JUrl("layer-selection.js")));
}
- добавьте тег
<div id="reactRoot"></div>
на html-страницу.
Результат:
Когда я открываю страницу, я вижу <script type="text/javascript" src="/somapp/wro/@appVersion@/layer-selection.js"></script>
в исходном коде страницы, и этот файл включает в себя 3 файла js из вышеупомянутого wro.xml:
!function(e){function r(r){for(var n,l,i=r[0],a=r[1],f=r[2],p=0,s=[];p<i.length;p++)l=...
(this["webpackJsonplayer-selection"]=this["webpackJsonplayer-selection"]||[]).push([[2],[function(e,t,n){"use s....
(this["webpackJsonplayer-selection"]=this["webpackJsonplayer-selection"]||[]).push([[0],{11:function(e,t,a)...
Проблема в том, что компонент React не отображается, функция showLayerSelection
не определена, и я получаю
Минимизированная ошибка React # 200; посетите https://reactjs.org/docs/error-decoder.html?invariant =200а>
что соответствует
Целевой контейнер не является элементом DOM.
Любые идеи о том, как заставить его работать? Может проблема в упаковке wro4j?
ТИА