Question

我的简单React组件无法正常工作

视频中的讲师具有确切的代码，但对我不起作用。我尝试了几种不同的组合，包括将代码放在单独的.js文件中，并使用src属性进行链接，但似乎无济于事。

请帮助！

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js" 
        crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" 
        crossorigin></script>           
    </head>
    <body>
        <div id="container"></div>       
        <script type="text/jsx">  
            ReactDOM.render(
                <h1>Hello, React</h1>,
                document.getElementById('container')
            );      
        </script>
    </body>
</html>

页面上没有任何内容

Answer 1

默认情况下，浏览器无法理解

JSX。您需要使用babel之类的工具来将JSX代码（<h1>Hello, React</h1>）转换为有效的 ES5 javascript代码，浏览器可以理解。

要使您的示例正常工作，只需添加以下行<script src="<script src="https://unpkg.com/@babel/standalone@7.4.4/babel.min.js"></script>"></script>

请注意，此解决方案仅适用于测试小型示例，您应该在生产中考虑other solutions

<!DOCTYPE html>
<html>
    <head>
       <script src="https://unpkg.com/react@16/umd/react.development.js" 
       crossorigin></script>
       <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" 
       crossorigin></script>      
        
       <!-- Don't use this in production: -->
       <script src="https://unpkg.com/@babel/standalone@7.4.4/babel.min.js">
       </script>
    </head>
    <body>
        <div id="container"></div>       
        <script type="text/jsx">  
            ReactDOM.render(
                <h1>Hello, React</h1>,
                document.getElementById('container')
            );      
        </script>
    </body>
</html>

为什么React的'Hello React'代码不起作用

1 个答案: