Reactjs 通过外部文件来源时，react脚本不工作_Reactjs

Reactjs 通过外部文件来源时，react脚本不工作

reactjs

Reactjs 通过外部文件来源时，react脚本不工作,reactjs,Reactjs,我有下面的代码，它工作得很好。当我注释掉底部的react脚本并将其添加到clickme.js文件中时，在render函数返回的第一个div中得到了意外的token

我有下面的代码，它工作得很好。当我注释掉底部的react脚本并将其添加到clickme.js文件中时，在render函数返回的第一个div中得到了意外的token<

<!DOCTYPE html>
<html>
<head>
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
  <script crossorigin src="https://cdn.jsdelivr.net/npm/create-react-class@15.6.2/create-react-class.js"></script>
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.0/react-dom.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='clickme.js'></script>

  <title>Click Me</title>
</head>
<body>
  <div>
     Count:<span id="cnt1">0</span>
     <button id='btn1' type='button' style="width:60px">JS only</button>
  </div>
    <br>
  <div>
     Count:<span id="cnt2">0</span>
     <button id='btn2' type='button' style="width:60px">Jquery</button>
  </div>
   <br>
  <div id='react-example'> </div>


 <script type='text/jsx'>
       var btnCSS = {
       width: '60px',
       textAlign:'center',
       padding:0,
       border:0
    };
    class Counter extends React.Component {
       constructor(props) {
          super(props);
          this.state = { count: 0};
       }

       incrementCount() {
          this.setState( {count: this.state.count + 1});
       }
       render() {
          return (
             <div> Count:{this.state.count}
                <button type="button" style={btnCSS}
                   onClick={ this.incrementCount.bind(this) }>React</button>
             </div>
          );
       }
    };

    ReactDOM.render(
                <Counter />,
                document.getElementById('react-example')
     ) 
 </script>

</body>
</html>

}))

document.addEventListener（“DOMContentLoaded”），函数（事件）{
var BTNCS={
宽度：“60px”，
textAlign:“中心”，
填充：0，
边界：0
};
类计数器扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={count:0}；
}
递增计数（）{
this.setState（{count:this.state.count+1}）；
}
render（）{
返回(
计数：{this.state.Count}
反应
);

} })

ReactDOM.render(
,
document.getElementById（'react-example'）
)
});

只需将

type=“text/jsx”

添加到外部脚本标记：

<script src="clickme.js" type="text/jsx"></script>

只需将

type=“text/jsx”

添加到外部脚本标记：

<script src="clickme.js" type="text/jsx"></script>

我添加了type='text/jsx'并收到以下错误消息：babel.min.js:24未能加载file:///C:/Users/Bob/Desktop/clickme.js: 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https。您需要使用本地服务器运行。如果没有，您可以安装并运行http服务器（

npm install http server-g

），所以我尝试了，但没有成功。我运行index.html文件并提供静态文件，就像是绑在火箭上的乌龟一样。然后我将clickme.html和clickme.js的副本放在index.html目录中。当我在clickme.html文件中添加type='text/jsx'或type='text/babel'以加载clickme.js时，该文件不会加载。当它没有包括在我得到意外的令牌错误。我很抱歉，它没有为你工作。在我的测试中对我有用。由于浏览器沙盒安全性，您需要一个web服务器。浏览器不会从文件系统加载文件，例如，脚本可以访问敏感文件并在未经同意的情况下上载内容。我添加了type='text/jsx'并获得以下错误消息：babel.min.js:24未能加载file:///C:/Users/Bob/Desktop/clickme.js: 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、，https。您需要使用本地服务器运行。如果没有，您可以安装并运行http服务器（

npm install http server-g

ReactDOM.render(
<Counter />,
document.getElementById('react-example')
)
});

<script src="clickme.js" type="text/jsx"></script>