外部反應文件無法正常工作

在index.html我：外部反應文件無法正常工作

<div class="header-content-inner" id="example"> 
    ... 
</div>

然後：

<script src="js/react-dom.js"></script> 
<script src="js/react.js"></script> 
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
<script type="text/babel" src="js/segui-info.jsx"></script>

這種「SEGUI-info」是它的外部JS與文件中它的反應代碼：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var ex = <h1>It worked!</h1>; 

ReactDOM.render(ex, document.getElementById("example"));

正如你所猜測的那樣，「ex」沒有被附加/呈現給那個div。我是一個初學者反應，我不明白爲什麼它不工作。在簡單示例just like this one中，他們使用<script>標記內的反應代碼。我不想在.html文件中使用所有反應代碼。我究竟做錯了什麼？

編輯：這是我得到的控制檯上：

來源

2017-09-25 Ericson Willians

你有在任何錯誤，運行相同的代碼片段控制檯?,我不認爲「導入」是可行的，因爲它需要進行轉發，並且隨着導入反應並作爲外部文件作出反應，這些文件暴露在全局變量React和ReactDOM，所以我猜，沒有必要使用import – AngelSalazar

檢查這個小例子https://jsbin.com/laqiribeze/edit?html,js,output，注意到js選項卡設置爲ES6/babel，所以我的代碼是transpiled – AngelSalazar

我已經添加了一個控制檯錯誤的截圖到帖子。我也嘗試刪除導入，但沒有奏效。 –

-1

在反應您使用函數返回JSX，在你的榜樣var ex = <h1>It worked!</h1>;可能是類型轉換隻是一個字符串，而你需要做它是一個返回你想要的代碼的函數。試試這個如下：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const ex =() => (
    <h1>It worked!</h1>; 
);  

ReactDOM.render(ex, document.getElementById("example"));

來源

2017-09-25 15:44:36 melmquist

我這樣做了，我繼續得到錯誤。問題可能在其他地方，鏈接部分或其他地方。 –

@melmquist這不起作用 - 你的例子創建一個簡單的React組件，但是'ReactDOM.render（）'需要一個元素。 –

只需從代碼中刪除導入語句。

在腳本中首先添加'react'，然後添加'react-dom'。它一定會工作！

下面是一個簡單的工作示例

<!DOCTYPE html> 
<html> 
<head> 
     <meta charset="UTF-8" /> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
     <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
     <script type="text/babel" src="ext.jsx"></script> 
</head> 
<body> 
     <div id="example"/> 
</body> 
</html>

在ext.jsx將有

var ex = <h1>It worked!</h1>; 
ReactDOM.render(ex, document.getElementById('example'));

您可以在 jsfiddle

來源

2017-09-25 15:57:53

當我這樣做時，控制檯上出現以下錯誤：'未捕獲的ReferenceError：未定義ReactDOM'。它找不到ReactDOM，因爲它沒有被導入，並且當我導入時，它表示「require」沒有被定義。 –

外部反應文件無法正常工作

回答

相關問題