2
Ich arbeite an einer reactjs Anwendung. Ich möchte Komponenten strukturieren. ist die folgende korrekte Architektur?ReactJs Daten/Komponentenstruktur
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]))
}
}
dies ist der letzte Versuch - aber es ist nicht zu machen - ist die Abbildung falsch? ist der Fall-Schalter falsch?
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>
Ihre Definition von 'Daten' ist nicht gültig JS. JSX sollte keine Zeichenfolge sein. – Timo
Sicher - ich werde versuchen zu korrigieren - bitte näher erläutern - was ist der beste Weg, um eine Datenquelle zu bekommen --- dann Komponenten um ihn zu erstellen –
@TimoSta Ich habe versucht, eine mehr Echtzeit-Datensatz und Beispiel zu verwenden - aber es funktioniert nicht –