如何处理要求函数React.js图表？
如何处理要求函数React.js图表？
提问于 2016-10-25 15:59:50
我想运行这个演示https://github.com/reactjs/react-chartjs
安装(我已经运行了这部分)
这是一个CommonJS组件(用于Webpack或Browserify之类的组件)。 npm安装-保存反应-图表 您还必须包含chart.js，并将其作为依赖项进行响应。 npm安装--保存图表dom@^1.1.1 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 :意外令牌<
更新
<!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([])(…)回答 1
Stack Overflow用户
发布于 2017-08-21 20:32:48
您必须使用ReactDOM将React (app)组件注入到html中。
本质上，使用id创建一个div，然后调用ReactDOM，如下所示：
<!-- React app component will be injected in the div below -->
<div id="app-area"></div>JavaScript
ReactDOM.render(<MyComponent />, document.getElementById('app-area'));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40244589
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号