反應js不渲染你好世界

<!DOCTYPE html> 
<html lang = "en"> 
    <head> 
     <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> 
     <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> 
    </head> 
    <body> 
     <div class="root"></div> 
     <script type="text/babel"> 
      ReactDOM.render(
        <h1>Hello,World!</h1>, 
        document.getElementById('root') 
      ); 
     </script> 
    </body> 
</html>

上面的代碼只產生一個空白頁面看看控制檯我沒有看到任何錯誤。反應js不渲染你好世界

來源

2017-12-03 Bipul Adh

您的元素有一個class調用根。你需要一個名爲根的id元素：

<div id="root"></div>

DEMO

編輯：您還需要添加巴貝爾，獨立模塊（見this previous SO answer）。

來源

2017-12-03 03:14:40 Andy

將其更改爲'id'。仍然沒有效果。事實上，我轉向上課的原因是爲了嘗試各種設置，因爲ID dint首先工作。 –

如果你看看它的演示效果。其他事情出錯了。您是否在控制檯中發現任何錯誤？你如何解釋這個？你使用的是webpack還是其他一些方式？ – Andy

我的代碼片段與codepen完美結合，但它不適用於我的本地瀏覽器。 –

你說document.getElementById('root')但你的元素是一個類。你的元素應該有一個根目錄：<div id="root"></div>。

來源

2017-12-03 03:15:10 socketwiz

 <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> 
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
    <script type="text/babel"> 
     const element=<h1>Hello,World</h1>; 
     ReactDOM.render(
       element, 
       document.getElementById('root') 
     ); 
    </script>

運行上面的代碼，你的代碼的主要問題是你已經使用巴貝爾和havenot加js dependency.Moreover，你是在JS，但類名ID獲取元素定義HTML。

來源

2017-12-25 08:26:32

反應js不渲染你好世界

回答

相關問題