代码之家  ›  专栏  ›  技术社区  ›  Nitesh Rana

未定义ReactDom?

  •  1
  • Nitesh Rana  · 技术社区  · 8 年前

    enter image description here

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> 
        <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
            );
        </script>
    </body>
    </html>
    

    上述程序运行良好。但是当我将脚本文件中的内容移动到一个单独的应用程序时。jsx文件它显示未定义reactDom的错误。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> 
        <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel" src="app.jsx">
    
        </script>
    </body>
    </html>
    

    ReactDom.render(
        <h1>Hello React!!!</h1>,
        document.getElementById('example')
    )
    
    2 回复  |  直到 8 年前
        1
  •  9
  •   joews    8 年前

    全球是 ReactDOM (注 DOM 都是大写)。

        2
  •  0
  •   loelsonk    8 年前

    正确的语法是 ReactDOM.render

    见下例:

    ReactDOM.render(
        <h1>Hello React!!!</h1>,
        document.getElementById('example')
    )
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    
    
    <div id="example"></div>