请注意，我正在尝试使用外部CDN运行react应用程序，但在html文件上出现问题，显示：
未捕获引用错误：未定义require索引。html:3这是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="styles/style.css">
<script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
import Todo from 'component/Todo.js';
const App = () =>(
<div>
<h1>My Todos</h1>
<Todo />
</div>
)
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
这是JavaScript代码
function Todo (){
return (<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>);
}
export default Todo;
您可以从另一台服务器导入外部脚本，如下所示：
componentDidMount() {
const script = document.createElement("script");
script.src = "/static/libs/your_script.js";
script.async = true;
script.onload = () => this.scriptLoaded();
document.body.appendChild(script);
}
然后确保您的文件已加载：
scriptLoaded() {
// your stuff to do!
}
另一种方法是使用反作用头盔：
首先使用安装
npm install --save react-helmet
然后像这个一样使用
<Helmet>
<script src="www.test.ts" />
</Helmet>
注意，通过这种方式，您的脚本将加载到<head>中