我有一個由 html 檔案組成的應用程式，如下所示：
<!-- ... existing HTML ... -->
<div id="input-field"></div>
<!-- ... existing HTML ... -->
<!-- Load React. -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="InputField.js"></script>
</body>
我還有一個看起來像這樣的反應組件：
class InputField extends React.Component {
render(){
return(
<div>
<h1>test</h1>
</div>
)
}
}
ReactDOM.render(<InputField />, document.getElementById('input-field'))
您可能已經注意到，react 組件使用的是 jsx 語法。我希望能夠運行一個構建腳本，將我的所有 jsx 檔案轉換為 js，以便我的瀏覽器可以讀取和呈現組件。
謝謝
uj5u.com熱心網友回復：
首先，您需要添加Babel以轉換您的JSX內容，這是通過將此行添加到html檔案中來執行此操作的方法：
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
然后您需要將type屬性添加到您的InputField腳本中，如下所示：
<script type="text/babel" src="InputField.js"></script>
這是完整的代碼：
<!-- ... existing HTML ... -->
<div id="like_button_container"></div>
<!-- ... existing HTML ... -->
<!-- Load React. -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Babel js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Load our React component. -->
<script type="text/babel" src="InputField.js"></script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466117.html
標籤：javascript 反应 jsx