Question

我想要运行此演示https://github.com/reactjs/react-chartjs

安装（我已运行此部分）

这只是一个CommonJS组件（与Webpack或Browserify一起使用）
npm install --save react-chartjs
您还必须包含chart.js和React作为依赖项。
npm install --save chart.js@^1.1.1 react react-dom

我不知道如何运行以下部分：

使用示例

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

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

这是我完整的html文件：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="dist/react-chartjs.js"></script>

<body>
<script>
var LineChart = require("react-chartjs").Line;

/*var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});
*/
</script>


</body>
</html>

它会产生如下错误：

test.html：14未捕获的ReferenceError：require未定义（...）

或

test.html：18 Uncaught SyntaxError：意外的令牌＆lt;

更新

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="dist/react-chartjs.js"></script>
<script src="js/require.js"></script>

<body>
<script type='text/babel'>
var LineChart = require("react-chartjs").Line;

var MyComponent = React.createClass({
  render: function() {
    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
  }
});

</script>


</body>
</html>

现在错误是：

Uncaught Error: Module name "react-chartjs" has not been loaded yet for context: _. Use require([])(…)

Answer 1

您必须使用ReactDOM将React（app）组件注入您的HTML。

基本上，使用id创建一个div，然后调用ReactDOM，如下所示：

<强> HTML

<!-- React app component will be injected in the div below -->
<div id="app-area"></div>

<强>的JavaScript

ReactDOM.render(<MyComponent />, document.getElementById('app-area'));

如何使用require函数React.js图表？

更新

1 个答案:

如何使用require函数React.js图表​​？

更新

1 个答案:

如何使用require函数React.js图表？