Meteor + React + Highchart

Question

我正在使用 Meteor 1.3(beta.5) 并尝试使用 react 优化的 npm highchart 包，称为 kirjs/react-highcharts (https://github.com/kirjs/react-highcharts)。

但是，我无法在我的页面上成功显示 highchart 图表。比如下面的代码怎么翻译成meteor 1.3的方式？

var config = {
  /* HighchartsConfig */
};
React.render(<ReactHighcharts config = {config}></ReactHighcharts>, document.body);

您的帮助将不胜感激。谢谢。

Answer 1

这是一个分步指南...

首先，你需要安装两个 Meteor 包：

meteor add meteorhacks:npm
meteor add cosmos:browserify

注意：Browserify 调整 NPM 模块以供在客户端使用。

接下来，运行一次流星。

meteor

现在用 Ctrl-C (windows) 停止流星

Meteor 现在已在项目的根目录中添加了一个 packages.json 文件。

在packages.json中添加以下NPM依赖：

{
  "externalify": "0.1.0",
  "react-highcharts" : "7.0.0"
}

Meteor 要求您指定准确的版本号。以上是撰写本文时的最新版本。

接下来，在项目的根目录（“客户端”和“服务器”旁边）创建一个名为“lib”的文件夹。

在 lib 中，创建一个名为“browserify”的文件夹

在 browserify 中，创建 2 个文件：

app.browserify.js
app.browserify.options.json

应该是这样的：

在app.browserify.js里面粘贴这段代码：

ReactHighcharts = require('react-highcharts/bundle/ReactHighcharts');

这将创建一个可以在客户端使用的全局变量。

上面的代码使用了与 ReactHighcharts 库捆绑在一起的 Highcharts 版本。如果您想使用不同的 Highcharts 版本，可以使用以下代码：

ReactHighcharts = require('react-highcharts');

现在在app.browserify.options.json 中粘贴以下内容：

{
  "transforms": {
    "externalify": {
      "global": true,
      "external": {
        "react": "React.require",
        "react-dom": "React.require"
      }
    }
  }
}

这段代码意味着 ReactHighcharts 将使用 Meteor 的 React 包，而不是从 NPM 下载标准的 React 包。

使用 Meteor 的 React 包很重要，因此您可以使用响应式数据。

通过添加此代码，您添加到 Browserify 的所有与 React 相关的 NPM 模块也将使用 Meteor 的 React 包。

注意：Externalify 允许您定义用于 NPM / Browserify 依赖项的外部库。