[英]Splitting up react js components into separate files — and handling the creation of a dashboard based application
I am looking at using reactjs as a framework to manage/control the various chart widgets. 我正在寻找使用reactjs作为管理/控制各种图表小部件的框架。
-- when I started looking to place these components into separate js files -- undefined errors started appearing. -当我开始寻找将这些组件放入单独的js文件中时-未定义的错误开始出现。
-- then how to structure how the charts should be rendered on a panel, how interactions could be implemented -- master/slave relationships -- update cta -然后如何构造图表应如何在面板上呈现,如何实现交互-主/从关系-更新cta
http://jsfiddle.net/cfrapLma/28/ http://jsfiddle.net/cfrapLma/28/
var config = [{
"width": 200,
"height": 200,
"type": "piechart",
"serviceApi": "api.php?mode=GetCars"
}, {
"width": 100,
"height": 100,
"type": "barchart",
"serviceApi": "api.php?mode=GetBoats"
},
{
"width": 200,
"height": 200,
"type": "piechart",
"serviceApi": "api.php?mode=GetCars"
},
{
"width": 200,
"height": 200,
"type": "linechart",
"serviceApi": "api.php?mode=GetCars"
}];
var MultipleCharts = React.createClass({
getChart: function(config) {
switch (config.type) {
case 'piechart':
return <PieChart width={config.width} height={config.height} service={config.service} />
case 'barchart':
return <BarChart width={config.width} height={config.height} service={config.service} />
case 'linechart':
return <LineChart width={config.width} height={config.height} service={config.service} />
}
},
render: function () {
var config = this.props.config;
return (
<div>
{config.map((chartConfig, index) => {
return (
<div key={index} className={'holder' + index}>
{this.getChart(chartConfig)}
</div>
)
})}
</div>
);
}
});
var PieChart = React.createClass({
componentDidMount: function () {
var $this = $(ReactDOM.findDOMNode(this));
console.log("rendered div now engage d3");
// set el height and width etc.
},
render: function () {
return (
<div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height}
data-service={this.props.service}>pie.
</div>
);
}
});
var LineChart = React.createClass({
componentDidMount: function () {
var $this = $(ReactDOM.findDOMNode(this));
console.log("rendered div now engage d3");
// set el height and width etc.
},
render: function () {
return (
<div className="linechart" data-role="linechart" data-width={this.props.width} data-height={this.props.height}
data-service={this.props.service}>line.
</div>
);
}
});
var BarChart = React.createClass({
componentDidMount: function () {
var $this = $(ReactDOM.findDOMNode(this));
console.log("rendered div now engage d3");
// set el height and width etc.
},
render: function () {
return (
<div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height}
data-service={this.props.service}>bar.
</div>
);
}
});
ReactDOM.render(
<MultipleCharts config={config} />,
document.getElementById('example')
);
You should use some build tools like webpack or gulp. 您应该使用一些构建工具,例如webpack或gulp。 I am provides an example that how you should do it. 我提供了一个示例,说明您应该如何做。
https://github.com/OnlyRefat/Example https://github.com/OnlyRefat/示例
It will help to you write moduler code. 这将帮助您编写模块代码。 You can write code in separate files easily. 您可以轻松地在单独的文件中编写代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.