Meteor + React + Highchart

Question

我正在使用Meteor 1.3（beta.5）并尝试使用名为kirjs / react-highcharts（https://github.com/kirjs/react-highcharts）的反应优化的npm highchart包。

但是我无法在我的页面上成功显示高图图表。例如，如何将以下代码转换为流星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（窗口）停止流星

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

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

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

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

接下来，在项目的根目录中创建一个名为“lib”的文件夹（“client”和“server”旁边）。

在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依赖项的外部库。