Question

我正在使用babel-standalone，我正在尝试为反应jsx代码添加外部文件。我使用npm install http-server -g并使其正常工作。我将我的html和js文件放在服务器公共目录中。当我尝试使用以下内容加载时：

 <script src ='react001.jsx' type='text/jsx'></script>

文件未加载。当我加载：

<script src ='react001.jsx' ></script>

文件加载但我在控制台中收到意外的令牌错误。

以下是两个文件：

react001.html：

<!DOCTYPE html>
<html>
<head>
  <script  src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>


  <script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
  <script  src="https://cdn.jsdelivr.net/npm/create-react-class@15.6.2/create-react-class.js"></script>
  <script  src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.0/react-dom.min.js"></script>


  <title>React Example</title>
</head>
<body>
  <div id='container'></div>

<script type='text/jsx' src='react001.jsx' ></script>
</body>
</html>

这是jsx文件：

class HelloUser extends React.Component {
        render() {
           return (
              <div>
                 <h1>Hello, {this.props.name}!</h1>
                 <h1>Hello</h1>
              </div>
           );
        }
     }



     ReactDOM.render(
              <HelloUser name='Blobby2' />,
              document.getElementById('container')
     )

无法添加外部jsx文件

0 个答案: