Question

我正在尝试将jsx与类一起使用，以创建一个简单的hello world程序以在浏览器（firefox）中打印“ Hello world”。我可以获得一个页面[带有嵌入式jsx的html] [1]可以工作。但是当我尝试使用类时却没有。

我在控制台输出

中收到以下信息

Download the React DevTools for a better development experience: https://fb .me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb .me/react-devtools-faq react-dom.development.js:21347:9
unreachable code after return statement[Learn More]
babel.js:61389:2
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ babel.js:61666:4

The Components object is deprecated. It will soon be removed. index.html
ReferenceError: require is not defined[Learn More]

    <anonymous> file:///Users/Jacob/temp/index.html:5 
    run https://unpkg.com/babel-standalone@6.26.0/babel.js:61531 
    check https://unpkg.com/babel-standalone@6.26.0/babel.js:61597 
    loadScripts https://unpkg.com/babel-standalone@6.26.0/babel.js:61624
    onreadystatechange https://unpkg.com/babel-standalone@6.26.0/babel.js:61549

jsx / index.jsx

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

class NavBar extends React.Component {

    render() {
        return (
                <div>
                    Hello world
                </div>
        );
    }
}

ReactDOM.render(<NavBar />, document.querySelector('#root'))

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
            <!--
            <script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
            -->
        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <div id="root"></div>
        <script type='text/babel' src='jsx/index.js'></script>

    </body>
</html>

Answer 1

firefox中针对您的问题的快速解决方案是将jsx / index.jsx更改为

class NavBar extends React.Component {

    render() {
        return (
                <div>
                    Hello world
                </div>
        );
    }
}

ReactDOM.render(<NavBar />, document.querySelector('#root'))

即删除'import'

通过this来使用babel-standalone来使用babel。

当您使用babel-standalone时，最好将代码更改为

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

            <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
            <!--
            <script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
            -->
        <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
    </head>

    <body>
        <div id="root"></div>
        <script type='text/babel'>
          class NavBar extends React.Component {  
             render() {
              return (
                    <div>
                        Hello world
                    </div>
                 );
             }
          }

          ReactDOM.render(<NavBar />, document.querySelector('#root'))
        </script>

    </body>
</html>

React.js控制台错误：“组件对象已弃用”和“ ReferenceError：未定义require”

1 个答案: