Javascript 调用window.onload=init；文本/巴别塔_Javascript_Reactjs_React Jsx

Javascript 调用window.onload=init；文本/巴别塔

javascript reactjs

Javascript 调用window.onload=init；文本/巴别塔,javascript,reactjs,react-jsx,Javascript,Reactjs,React Jsx,在我的html页面中，我做了一些ReactJS，我有，在那里我有以下代码，但它不起作用。“搜索”这里是一个JSX函数 window.onload = init; function init() { var button = document.getElementById('search'); button.onclick = search; } function search() { ReactDOM.render( <Tabs />, documen

在我的html页面中，我做了一些ReactJS，我有

，在那里我有以下代码，但它不起作用。“搜索”这里是一个JSX函数

window.onload = init;

function init() {
  var button = document.getElementById('search');
  button.onclick = search;
}

function search() {
  ReactDOM.render(
    <Tabs />,
    document.getElementById('tabstarget')
  );
  ReactDOM.render(
    <Body />,
    document.getElementById('body')
  );
};

window.onload=init；
函数init（）{
var button=document.getElementById（'search'）；
button.onclick=搜索；
}
函数搜索（）{
ReactDOM.render(
,
document.getElementById（'tabstarget'）
);
ReactDOM.render(
,
document.getElementById（'body'））
);
};

如果我将此代码隔离在单独的JS文件中，并使用单独的JSX文件和“搜索”功能，如：

<script type="text/babel" src="resources/js/main.jsx"></script>
<script src="resources/js/main.js"></script>

然后我的按钮看不到搜索函数，因为它是在另一个范围内，因为巴贝尔附加“使用严格”的编译结果

唯一的方法是手动将JSX文件预编译到JS并将其附加到main.JS。那么它工作得很好。这并不方便，因为每次我想尝试在JSX中进行更改时都需要这样做。我做错了什么？如何调用JSX函数而不必每次手动预编译它？多谢各位