请我尝试使用外部 CDN 运行 React 应用程序，并且在 html 文件上遇到问题：
未捕获的ReferenceError：require未定义index.html：3 这是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="styles/style.css">
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/[email protected]/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!
}
另一种方法是使用react Helmet：
首先使用以下命令安装它：
npm install --save react-helmet
然后像这样使用它
<Helmet>
<script src="www.test.ts" />
</Helmet>
请注意，这样您的脚本将加载到
<head>在您的index.html 文件中添加 Office.js 脚本引用：
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
在 React 应用程序中初始化 Office.js 库。您可以在index.js 文件中执行此操作：
const Office = window.Office;
Office.initialize = () => {
ReactDOM.render(
<YourComponent />,
document.getElementById('root')
);
};