无意间又看到了Meteor的官网,随便点了两下,发现官网的Tutorial竟然直接使用了React,记得在大学的时候曾经学过一段时间Meteor,当时学的迷迷糊糊的,主要是Meteor的模板的语法还有前后端直接一起干,不是分离的开发方式导致有点懵,这次刚好对照着Tutorial重新学习一下。
根据官网的例子,这里是main.html的代码:
<title>Todo List</title>
</head>
<body>
<div id="root"></div>
</body>
这是main.js的代码:
import { Meteor } from 'meteor/meteor';
import ReactDOM from 'react-dom';
import App from './app.js';
Meteor.startup(() => {
ReactDOM.render(<App />, document.getElementById('root'));
});
这是app.js的代码:
class App extends React.Component{
render(){
return <div>
<h1>Hello,World!</h1>
</div>
}
}
export default App;
运行的时候,会发生错误:
Uncaught Error:Target container is not a DOM element.
经过一段时间的排查和实验,解决方案如下:
在main.js中插入如下代码:
import './main.html';
官网中没有提及,只是在Meteor初始化的项目中出现是这样写的,我的理解是main.js应该绑定到main.html中,所以需要引入main.html,连接main.html中的target container.