流星+ React + Highchart [英] Meteor + React + Highchart

问题描述

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

然而，我无法成功显示我的高图页。例如，你如何将下面的代码翻译成流星1.3方式？

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

您的帮助将非常值得赞赏。谢谢。

解决方案

这是一个循序渐进的指南...

首先，您需要安装两个Meteor软件包：

  meteor add meteorhacks：npm 
 meteor add cosmos：browserify 
  

注意：Browserify会调整NPM模块以用于客户端。

接下来，运行一次流星。

  meteor 
  

现在停止流星与Ctrl-C（窗口）

流星现在添加了一个 packages.json 文件放在项目的根目录下。

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

  {
externalify：0.1.0，
react-highcharts：7.0.0
} 
  

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

接下来，在项目的根目录中创建一个名为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 粘贴以下内容：

  {
转换：{
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依赖项。

I'm using Meteor 1.3(beta.5) and trying to use react optimized npm highchart package called kirjs/react-highcharts (https://github.com/kirjs/react-highcharts).

However I couldn't successfully display highchart graph on my page. For example, how do you translate code below into meteor 1.3 way?

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

Your help would be really appreciated. Thank you.

解决方案

Here is a step-by-step guide...

First, you need to install two Meteor packages:

meteor add meteorhacks:npm
meteor add cosmos:browserify

NOTE: Browserify adapts NPM modules for use on the client side.

Next, run meteor once.

meteor

Now stop meteor with Ctrl-C (windows)

Meteor has now added a packages.json file in the root of your project.

In packages.json add the following NPM dependencies:

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

Meteor requires you specify an exact version number. Above are the latest versions at the time of writing.

Next, creates a folder called "lib" in the root of your project (next to "client" and "server").

Inside lib, create a folder called "browserify"

Inside browserify, create 2 files:

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

It should look like this:

Inside app.browserify.js paste this code:

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

This will create a global variable which can be used on the client side.

The code above uses the Highcharts version which is bundled with the ReactHighcharts library. If you'd like to use a different Highcharts version, you can use the following code:

ReactHighcharts = require('react-highcharts');

Now inside app.browserify.options.json paste the following:

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

This code means that ReactHighcharts will use Meteor's React package, rather than downloading the standard React package from NPM.

Using Meteor's React package is important so you can use reactive data.

By adding this code, all React-related NPM modules you add to Browserify will also use Meteor's React package.

NOTE: Externalify lets you define an external library to use for NPM / Browserify dependencies.

这篇关于流星+ React + Highchart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！