Question

我正在尝试运行下面的html文件，我无法理解为什么它不会工作。我很确定我拥有所有组件。显示的唯一内容是＆＃34;单页应用程序＆＃34; H1。我无法显示Hello world h1。

<html>
<head>  
    <title>Lab 5 To Do list</title>
        <!--For React -->   
        <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>


</head> 
<body>
<h1>Single Page Application</h1>
    <div id = "MyContainer"></div>
</body>
<script type = "text/Babel">

    const hello = <h1>Hello world</h1>;

    ReactDOM.render( {hello} ,      document.getElementById('MyContainer') );


</script>
</html>

Answer 1

尝试实现一个简单的功能组件：

const hello = props => <h1>Hello world</h1>;

Answer 2

您的代码存在一些问题。一方面，

const hello = <h1>Hello world</h1>;

不是有效的React组件。组件区分大小写（Hello），对于这种情况，必须设计为函数。

此外，当您致电ReactDOM.render()时，您需要将您的组件视为html元素，即<Hello />。

此代码是正确的：

<html>
    <head>  
    <title>Lab 5 To Do list</title>

    <!--For React -->   
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    </head> 

    <body>
        <h1>Single Page Application</h1>
        <div id = "MyContainer"></div>
    </body>

    <script type = "text/babel">

        const Hello = props => (
            <h1>Hello world</h1>
        );

        ReactDOM.render( 
            <Hello />,      
            document.getElementById('MyContainer') 
        );

    </script>
</html>

您应该查看React homepage上的教程，这非常有帮助。

我的基本反应问候世界不起作用。

2 个答案: