反应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不渲染你好世界

答

您的元素有一个class调用根。你需要一个名为根的id元素：

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

DEMO

编辑：您还需要添加巴贝尔，独立模块（见this previous SO answer）。

将其更改为'id'。仍然没有效果。事实上，我转向上课的原因是为了尝试各种设置，因为ID dint首先工作。 –

如果你看看它的演示效果。其他事情出错了。您是否在控制台中发现任何错误？你如何解释这个？你使用的是webpack还是其他一些方式？ – Andy

我的代码片段与codepen完美结合，但它不适用于我的本地浏览器。 –

答

你说document.getElementById('root')但你的元素是一个类。你的元素应该有一个根目录：<div id="root"></div>。

答

 <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。

反应js不渲染你好世界

相关推荐