Question

我正在尝试将React包含在网页中。我想将这些组件分解成自己的.js文件。我没有运气。

我的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>

我的app.js文件如下所示。

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

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

我的greetings.js文件如下

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

所以我期待的是“嗨”，然后是“ Hello world！”但我收到“问候语未定义”。

你能帮我吗？

Answer 1

我正在回答自己的问题。问题是加载.js文件的顺序。必须是

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

然后它正确显示了网页。

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

1 个答案: