Question

我试图了解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'));

我假设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>

react-chartjs.js应该是已编译的chartjs组件。

以这种方式运行索引我有这个错误：

 Uncaught ReferenceError: LineChart is not defined

我需要使用这一行

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

但在MyComponent.js中我有错误，需要未定义

出了什么问题？

Answer 1

在node.js中，require模块是内置的，但是在浏览器中如果你必须使用require，那么你必须使用require.js或者只是从html部分的文件夹继承脚本 proc 44586 executable: /bin/zsh proc 44586 cwd: /private/tmp

Answer 2

使用require()时，您尝试使用通常称为CommonJS的模块系统，似乎react-chartjs仅作为CommonJS模块使用。

CommonJS样式模块加载器在Node.js和IO.js中引入并使用，作为将模块和脚本导入应用程序的默认方式。

CommonJS目前未捆绑任何浏览器，这就是您必须通过Browserify或Webpack等工具运行脚本的原因。

Answer 3

从react-chartjs上的安装部分：

这只是一个CommonJS组件（用于类似的东西） Webpack或Browserify）

Webpack和Browserfiy都允许您使用require加载模块。似乎react-chartjs仅适用于其中一种工具。

如何从github导入React组件？

3 个答案: