在Meteor中使用React显示MongoDB中的数据,你需要遵循以下步骤:
首先,确保你已经安装了Meteor和创建了一个新的Meteor项目。
meteor create myapp
cd myapp
你需要添加react-meteor-data
包来帮助React组件与Meteor数据源同步。
meteor add react-meteor-data
在你的Meteor项目中创建一个Mongo集合。
// 在server/main.js 或者单独的collections文件中
import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.Collection('tasks');
创建一个React组件来显示Mongo集合中的数据。
// 在client/main.js 或者单独的components文件夹中
import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { Tasks } from '../imports/api/tasks';
const TaskList = () => {
const { tasks, isLoading } = useTracker(() => {
const handler = Meteor.subscribe('tasks');
return {
tasks: Tasks.find({}).fetch(),
isLoading: !handler.ready(),
};
});
if (isLoading) {
return <div>Loading...</div>;
}
return (
<ul>
{tasks.map(task => (
<li key={task._id}>{task.name}</li>
))}
</ul>
);
};
export default TaskList;
确保你在服务器端发布了Mongo数据。
// 在server/main.js 或者单独的publications文件中
import { Meteor } from 'meteor/meteor';
import { Tasks } from '../imports/api/tasks';
Meteor.publish('tasks', function tasksPublication() {
return Tasks.find();
});
最后,在你的应用入口点使用这个组件。
// 在client/main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import TaskList from './components/TaskList';
const App = () => (
<div>
<h1>Task List</h1>
<TaskList />
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
领取专属 10元无门槛券
手把手带您无忧上云