Question

在我的html页面中，我做了一些ReactJS，我有<script type="text/babel" src="resources/js/main.jsx"></script>，我有以下代码，但它不起作用。＆＃34;搜索＆＃34;这是一个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')
  );
};

`

如果我将此代码隔离在单独的JS文件中，并使用＆＃34; search＆＃34;将单独的JSX文件分开。功能如：

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

然后我的按钮没有看到搜索功能，因为它在另一个范围内，因为Babel追加＆＃34;使用严格＆＃34;编译结果。

唯一的方法是手动将JSX文件预编译为JS并将其附加到main.js.然后它工作正常。每次我想在JSX中尝试我的更改时，我都不需要这样做。我做错了什么以及如何在不每次手动预编译的情况下调用JSX函数？谢谢。

调用window.onload = init; in text / babel

0 个答案: