Meteor 云
教程
指南
API 文档
论坛
Meteor 指南
Meteor 云
教程
指南
API 文档
论坛
Meteor 指南

React

如何使用 React 与 Meteor。

阅读本指南后，您将了解

  1. 什么是 React，以及为什么您会考虑将其与 Meteor 一起使用。
  2. 如何在 Meteor 应用程序中安装 React，以及如何正确使用它。
  3. 如何将 React 与 Meteor 的实时数据层集成。
  4. 如何在 React/Meteor 应用程序中进行路由。

简介

React 是一个用于构建响应式用户界面的 JavaScript 库，由 Facebook 团队开发和分发。

React 拥有一个充满活力且不断增长的生态系统，并且广泛用于各种与不同框架组合的生产环境中。

要了解有关一般 React 使用的更多信息并快速掌握该库，您应该查看React 文档。

要在 Meteor 中开始使用 React，您可以按照React 教程进行操作。

安装和使用 React

要在 Meteor 中安装 React，应将其添加为 npm 依赖项

meteor npm install --save react react-dom

这会将 react 安装到您的项目中，并允许您在文件中使用 import React from 'react' 访问它。

import React from 'react';

export const HelloWorld = () => <h1>Hello World</h1>;

您可以使用 react-dom 包将组件层次结构渲染到 DOM

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { render } from 'react-dom';
import { HelloWorld } from './HelloWorld.js';

Meteor.startup(() => {
  render(<HelloWorld />, document.getElementById('app'));
});

当然，您需要在 body 的 HTML 中某个位置包含一个 <div id="app"></div>。

默认情况下，当您使用 meteor create my-app 创建新的应用程序时，Meteor 已经使用 React，因此此基本设置已为您准备就绪。

使用第三方包

Meteor 不需要任何不同的配置，因为 Meteor 与 NPM 完全兼容，因此您可以使用任何 React 组件库。

使用 Meteor 的数据系统

React 是一个前端渲染库，因此它本身并不关心数据如何进出组件。

另一方面，Meteor 在核心包中提供了发布和方法，用于订阅和修改应用程序中的数据。

为了集成这两个系统，我们开发了一个react-meteor-data 包，它允许 React 组件通过 Meteor 的Tracker 反应系统响应数据更改。

使用 `useTracker`

useTracker 函数遵循 React 的最新最佳实践。选择钩子而不是 HOC。

要在 React 组件内部使用来自 Meteor 集合的数据，请安装react-meteor-data

meteor add react-meteor-data

安装完成后，您将能够导入 useTracker 函数和其他函数。

您可以在此处了解更多信息

路由

尽管有很多使用 Meteor 和 React 进行路由的解决方案，但react-router 是目前最流行的包。

与往常一样，Meteor 在使用 React Router 时不需要任何不同的操作，因此您可以按照他们的快速入门指南在 Meteor 项目中设置 React Router。

Meteor 包和 Blaze

在 Atmosphere 包中使用 React

如果您正在编写 Atmosphere 包并希望依赖 React 或本身依赖 React 的 npm 包，则不能使用 Npm.depends() 和 Npm.require()，因为这会导致将 React 的 _2_ 个副本安装到应用程序中（此外，Npm.require() 仅在服务器端有效）。

相反，您需要让用户在应用程序本身中安装正确的 npm 包。这将确保仅将 React 的一个副本交付给客户端，并且不会发生版本冲突。

为了检查用户是否已安装了正确版本的 npm 包，您可以使用tmeasday:check-npm-versions 包在运行时检查依赖项版本。

Blaze 中的 React 组件

如果您不使用 Blaze 与 React，则可以跳过此步骤。

如果您想在使用Blaze（如果您想将应用程序从 Blaze 逐步迁移到 React，这是一个好策略）构建的较大应用程序中使用 React，则可以使用react-template-helper 组件，该组件在 Blaze 模板内渲染 React 组件。首先运行 meteor add react-template-helper，然后在模板中使用 React 助手

<template name="userDisplay">
  <div>Hello, {{username}}</div>
  <div>{{> React component=UserAvatar userId=_id}}</div>
</template>

您需要使用助手传入组件类。

import { Template } from 'meteor/templating';

import './userDisplay.html';
import UserAvatar from './UserAvatar.js';

Template.userDisplay.helpers({
  UserAvatar() {
    return UserAvatar;
  }
})

component 参数是要包含的 React 组件，应使用助手传入。

渲染组件时，其他所有参数都作为 prop 传递给组件。

请注意，有一些注意事项

  • React 组件必须是包装元素中的唯一内容。由于 React 的限制（请参阅 facebook/react#1970，#2484），React 组件必须渲染为其父节点的唯一子节点，这意味着它不能有任何同级节点。

  • 这意味着 React 组件也不能是 Blaze 模板中的唯一内容，因为无法确定模板将在何处使用。

将回调传递给 React 组件

要将回调传递给您使用此助手包含的 React 组件，请创建一个返回函数的模板助手，并将其作为 prop 传入，如下所示

Template.userDisplay.helpers({
  onClick() {
    const instance = Template.instance();

    // Return a function from this helper, where the template instance is in
    // a closure
    return () => {
      instance.hasBeenClicked.set(true)
    }
  }
});

在 Blaze 中使用它

<template name="userDisplay">
  <div>
    {{> React component=UserAvatar userId=_id onClick=onClick}}
  </div>
</template>

React 中的 Blaze 模板

我们还可以在 React 组件中使用 Blaze 模板。这对于渐进式迁移策略同样有用；但更重要的是，它允许我们继续在 React 项目中使用为 Blaze 构建的大量 Atmosphere 包，以及 accounts-ui 等核心包。

一种方法是使用gadicc:blaze-react-component 包。首先运行 meteor add gadicc:blaze-react-component，然后导入并在组件中使用它，如下所示

import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';

const App = () => (
  <div>
    <Blaze template="itemsList" items={items} />
  </div>
);

<Blaze template="itemsList" items={items} /> 行与在 Blaze 模板内部编写 {{> itemsList items=items}} 相同。有关其他选项和更多信息，请参阅该包的项目页面。

在 GitHub 上编辑
// 搜索框