0
このjsonをループして段落を描画しようとしていますが、内側のループにアクセスするとマークアップがレンダリングされません？Reactjsコンポーネント - jsonオブジェクトをループする - マークアップを描画しない
オブジェクトの詳細をコンソールログで読み取ることはできますが、レンダリングマークアップは影響を受けていないようですが、スコープが失われていますか？
ここでの目標は、このjsonによって強化された文のバッチを回顧的にレンダリングすることです。
Score for emotional distress and hyperactivity and concentration is close to the average
Score for behavioural difficulties is slightly raised
Score for peer difficulties and overall stress is very high
Score for kind and helpful behaviour is very low
JSON
"contents": {
"1": {
"1": {
"alert": "green",
"values": ["emotional distress", "hyperactivity and concentration"],
"label": "close to the average"
},
"2": {
"alert": "yellow",
"values": ["behavioural difficulties"],
"label": "slightly raised"
},
"4": {
"alert": "red",
"values": ["peer difficulties", "overall stress"],
"label": "very high"
}
},
"2": {
"4": {
"alert": "red",
"values": ["kind and helpful behaviour"],
"label": "very low"
}
}
}
コンポーネント。
var YourCurrentStanding = React.createClass({
createSentence : function(array) {
if (array.length === 1) {
return array[0];
} else if (array.length === 0) {
return "";
}
return array.slice(0, array.length - 1).join(", ") + " and " + array[array.length - 1];
},
render: function() {
var that = this;
return (
<div className="component-container">
{
Object.keys(this.props.data.contents).map((key, i) => {
console.log("key", key);
console.log("index", i);
var ordered = this.props.data.contents[key];
var that = this;
return (
<div className="bands" key={i}>
{
Object.keys(ordered).map(function(key) {
console.log(key); // the name of the current key.
console.log(ordered[key]); // the value of the current key.
return (
<p className="large-text margin-bottom">Score for {that.createSentence(ordered[key].values)} is <b className={ordered[key].alert+"-text"}>{ordered[key].label}</b></p>
);
})
}
</div>
)
})
}
</div>
);
}
});
現在のデモ
var data = {
contents: {
"1": {
"1": {
"alert": "green",
"values": ["emotional distress", "hyperactivity and concentration"],
"label": "close to the average"
},
"2": {
"alert": "yellow",
"values": ["behavioural difficulties"],
"label": "slightly raised"
},
"4": {
"alert": "red",
"values": ["peer difficulties", "overall stress"],
"label": "very high"
}
},
"2": {
"4": {
"alert": "red",
"values": ["kind and helpful behaviour"],
"label": "very low"
}
}
}
};
var YourCurrentStanding = React.createClass({
createSentence : function(array) {
if (array.length === 1) {
return array[0];
} else if (array.length === 0) {
return "";
}
return array.slice(0, array.length - 1).join(", ") + " and " + array[array.length - 1];
},
render: function() {
var that = this;
return (
<div className="component-container">
{
Object.keys(data.contents).map((key, i) => {
console.log("key", key);
console.log("index", i);
var ordered = data.contents[key];
var that = this;
return (
<div className="bands" key={i}>
{
Object.keys(ordered).map(function(k, j) {
console.log(k); // the name of the current key.
console.log(ordered[k]); // the value of the current key.
return (
<p key={j} className="large-text margin-bottom">Score for {that.createSentence(ordered[k].values)} is <b className={ordered[k].alert+"-text"}>{ordered[k].label}</b></p>
);
})
}
</div>
)
})
}
</div>
);
}
});
ReactDOM.render(<YourCurrentStanding />, document.getElementById("app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>-
問題1 - 私のビルドで
- そのレンダリング異なる段落はあるが結合文はない。
コードをリファクタリングして、そこに存在すると予想されるデータをログに記録できるようにします。それはデバッグするために書かれているように悪夢です。 – Wainage
- 私はコンソールログを取得しています - ここにデータを表示します - console.log（キー）; //現在のキーの名前。 console.log（ordered [key]）; //現在のキーの値。 –
^2つのバンドdivを作成していることがわかります。コンテンツ配列内の正しい項目にアクセスします。本当に順序付けが必要です。 –