2
私はreactjsアプリケーションで作業しています。構造化コンポーネントを探しています。次の正しいアーキテクチャはありますか？ReactJsデータ/コンポーネント構造
data{
"loft" :{},
"asking-price" :{}
}
class Factory{
static GetComponent(component){
switch(component) {
case "loft":
return "<LoftComponent data='component'>";
break;
case "asking-price":
return "<AskingpriceComponent data='component'>";
break;
}
}
//main render
for(var i data){
React.createElement(Factory.GetComponent(data[i]))
}
}
これは、最新の試みである - が、そのレンダリングではない - マッピングが間違っていますか？ケーススイッチが間違っていますか？
var config = [{
"craft-breweries": {
"count": 5,
"latest": "The Wimbledon Brewery Company Limited",
"data": [{
"title": "Belleville Brewing Company",
"start": 2013
}, {
"title": "Kew Brewery",
"start": 2015
}, {
"title": "Laines Brewery (Four Thieves)",
"start": 2015
}, {
"title": "Sultan Brewery",
"start": 2015
}, {
"title": "The Wimbledon Brewery Company Limited",
"start": 2015
}]
},
"farmer-markets": {
"count": 5
}
}];
var MultipleComponents = React.createClass({
getComponent: function(config) {
console.log("config", config);
switch (config) {
case 'craft-breweries':
return <CraftBreweries />
case 'farmer-markets':
return <FarmerMarket />
}
},
render: function() {
var config = this.props.config;
return (
<div>
{config.map((chartConfig, index) => {
return (
<div key={index} className={'holder' + index}>
{this.getComponent(chartConfig)}
</div>
)
})}
</div>
);
}
});
var CraftBreweries = 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="craftbreweries" data-role="craftbreweries">
You have {this.props.count} number of breweries in your area. The latest one is {this.props.latest}.
</div>
);
}
});
var FarmerMarket = 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="farmermarket" data-role="farmermarket">
You have {this.props.count} number of farmer markets in your area.
</div>
);
}
});
ReactDOM.render(
<MultipleComponents config={config} />,
document.getElementById('root')
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<div id="root"></div>
「データ」の定義は有効なJSではありません。 JSXは文字列であってはなりません。 – Timo
確かめてください - 私は試して修正します - 詳細を教えてください - データソースを取得する最良の方法は何ですか？それからその周りにコンポーネントを作成してください –
@TimoStaもっとリアルタイムのデータセットとサンプルを使用しようとしました - しかし動作しない –