如何從github導入React組件？

我想使用react-chartjs庫。（https://github.com/jhudson8/react-chartjs）。我如何將其導入到我的項目中？

我試圖以這種方式：在一個文件MyComponent.js

：

var LC = React.createClass({ 
render: function(){ 
    var xfield = this.props.xfield; 
    var yfield = this.props.yfield; 
    var data = { 
      labels: xfield, 
      datasets: [ 
      { 
       label: "My First dataset", 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: yfield 
      }] 
     } 


    return(
     <LineChart data={data} width="600" height="250" /> 
    ); 

}}); 


var MyComponent = React.createClass({ 

render: function(){ 
    return(
     <LC xfield={a} yfield={b} /> 
    ); 
}}); 

React.render(<MyComponent />, document.getElementById('content'));

我假設A E b是值的陣列。

我的索引頁是這樣的：

<html> 
    <head> 
    <!-- React --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script> 
<script src="js/react-chartjs.js"></script> 
<script type="text/jsx;harmony=true" src="MyComponent.js"></script> 

</head> 
<body> 
    <div id="content"></div> 
</body>

反應，chartjs.js應該是編譯chartjs組件。

運行在這樣的指數，我有此錯誤：

Uncaught ReferenceError: LineChart is not defined

我需要使用此行

var LineChart = require("react-chartjs").Line;

但MyComponent.js我有需要的錯誤沒有定義

怎麼回事？

來源

2015-06-10 ntrax

當使用require()時，您正嘗試使用通常稱爲CommonJS的模塊系統，並且似乎react-chartjs僅作爲CommonJS模塊提供。

CommonJS風格的模塊加載器被引入並在整個Node.js和IO.js中使用，作爲將模塊和腳本導入到應用程序的默認方式。

CommonJS現在沒有與任何瀏覽器捆綁在一起，這就是爲什麼您必須通過如Browserify或Webpack這樣的工具來運行腳本。

來源

2015-06-10 13:27:20

從安裝部分的react-chartjs：

This is a CommonJS component only (to be used with something like Webpack or Browserify)

雙方的WebPack和Browserfiy使您可以使用require加載模塊。似乎react-chartjs被設計爲僅與這些工具中的一種一起工作。

來源

2015-06-10 13:27:34

OK現在我試試這個： var LineChart = require（「react-chartjs」）。 VAR MyComponent的= React.createClass（{ 渲染：函數（）{ 返回<應用於LineChart數據= {chartData}選項= {chartOptions}寬度= 「600」 HEIGHT = 「250」/> } }）;使用此命令： browserify -t reactify main。js -o bundle.js 然後調用bundle.js到index.html它不起作用 }）; React.render（，document.body）; – ntrax

項目安裝頁面還說，您必須包含[chart.js]（http://www.chartjs.org/）作爲依賴項。 –

在Node.js的要求模塊內置，但在瀏覽器中，如果你有使用需要，那麼你必須使用require.js或只是繼承了文件夾中的腳本的HTML部分 <script type="text/jsx" src ="/path/to/the file/"></script>

來源

2015-11-22 06:29:28

如何從github導入React組件？

回答

相關問題