包括对现有网页的反应 - 多个反应组件

Question

I am trying to include React to an web page. 我试图将React包含在网页中。 i would like to break up the components into it's own .js files. 我想将组件分解为自己的.js文件。 i am not having any luck. 我没有运气。

My index.html file looks like this. 我的index.html文件看起来像这样。

<html>  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>Hello React!</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>   
  </head>
  <body>
    <div id="root"> 
    </div>
    <script src="app.js" type="text/babel"> </script>
    <script src="greetings.js" type="text/babel"> </script> 
  </body>

My app.js file looks like this. 我的app.js文件看起来像这样。

class App extends React.Component {
        render() {
          return (
           <div>
             <Greetings />
             <h1>Hello World!</h1>
           </div>
             )
          }
      }

ReactDOM.render(<App />, document.getElementById('root'))

My greetings.js file looks like this 我的greetings.js文件看起来像这样

class Greetings extends React.Component {
        render() {
          return <h1>Hi</h1>
 }
}

So i was expecting "Hi" followed by "Hello world!" 所以我期待着“嗨”，接着是“Hello world！” but i am getting "Greetings is not defined". 但我得到“问候没有定义”。

Can you help me? 你能帮助我吗？

Answer 1

I am answering my own question. 我在回答我自己的问题。 The order which loads the .js files was the problem. 加载.js文件的顺序是问题所在。 it has to be 它一定要是

<script src="greetings.js" type="text/babel"> </script> 
<script src="app.js" type="text/babel"> </script>

Then it displayed the web page correctly. 然后它正确显示了网页。

包括对现有网页的反应 - 多个反应组件

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-05-17 00:41:55

包括对现有网页的反应 - 多个反应组件

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-05-17 00:41:55

解决方案1
0 已采纳 2019-05-17 00:41:55