0
여러 가지 레벨로 나눌 수있는 나무와 같은 구조의 json 파일이 있는데,이 파일은 메뉴와 같은 하위 요소가있는 하위 요소로 변환하려고합니다. -menu) :Reactjs : 중첩 된 json 배열을 반복 할 때 문제가 발생했습니다.
[
{
"label": {
"en": "Home"
},
"icon": "/images/nav/home.png",
"link": "/",
"type": "basic"
},
{
"label": {
"en": "Channels"
},
"icon": "/images/nav/channels.png",
"type": "children",
"children": [
{
"label": {
"en": "Getting Started"
},
"link": "/getting-started",
"type": "basic"
},
{
"label": {
"en": "Recommendations"
},
"link": "/recommendations",
"type": "basic"
},
{
"label": {
"en": "Calendar View"
},
"link": "/calendar",
"type": "basic"
},
{
"label": {
"en": "My Pictures"
},
"link": "/account/media",
"type": "basic"
},
{
"type": "space"
},
{
"label": {
"en": "All Channels"
},
"link": "/channels",
"type": "basic"
},
{
"label": {
"en": "Channel 1"
},
"link": "/channels/channel-1",
"type": "statuses",
"datasource": "/data/1",
"children": [
{
"label": {
"en": "Channel 1-1"
},
"link": "/channels/channel-1-1",
"type": "basic"
},
{
"label": {
"en": "Channel 1-2"
},
"link": "/channels/channel-1-2",
"type": "basic"
},
{
"label": {
"en": "Channel 1-3"
},
"link": "/channels/channel-1-3",
"type": "basic"
},
{
"label": {
"en": "Channel 1-4"
},
"link": "/channels/channel-1-4",
"type": "basic"
},
{
"label": {
"en": "Channel 1-5"
},
"link": "/channels/channel-1-5",
"type": "basic"
}
]
},
{
"label": {
"en": "Channel 2"
},
"link": "/channels/2",
"type": "statuses",
"datasource": "/data/2",
"children": [
{
"label": {
"en": "Channel 2"
},
"link": "/channels/channel-2",
"type": "basic"
},
{
"label": {
"en": "Channel 2-1"
},
"link": "/channels/channel-2-1",
"type": "basic"
},
{
"label": {
"en": "Channel 2-2"
},
"link": "/channels/channel-2-2",
"type": "basic"
},
{
"label": {
"en": "Channel 2-3"
},
"link": "/channels/channel-2-3",
"type": "basic"
},
{
"label": {
"en": "Channel 2-4"
},
"link": "/channels/channel-2-4",
"type": "basic"
}
]
},
{
"type": "custom",
"content": "<div><span class=\"green_bull\">•</span>Currently Online</div><div><span class=\"red_bull\">•</span>Currently Offline</div>"
}
]
},
{
"label": {
"en": "Shows"
},
"icon": "/images/nav/shows.png",
"type": "children",
"children": [
{
"label": {
"en": "LIVE"
},
"link": "/live",
"type": "basic"
},
{
"label": {
"en": "Browse Shows"
},
"link": "/live",
"type": "basic"
},
{
"label": {
"en": "Full Schedule"
},
"link": "/live",
"type": "basic"
},
{
"label": {
"en": "Upcoming Shows"
},
"type": "components",
"component": "navShow",
"datasource": "/shows/upcoming?limit=3"
}
]
},
{
"label": {
"en": "Community"
},
"icon": "/images/nav/community.png",
"type": "children",
"children": [
{
"label": {
"en": "Latest"
},
"link": "/community",
"type": "basic"
},
{
"label": {
"en": "Best of"
},
"link": "/community/highlight",
"type": "basic"
},
{
"label": {
"en": "Discussion Boards"
},
"link": "http://forum.slooh.askmp.ca/",
"type": "basic"
},
{
"label": {
"en": "Rankings"
},
"link": "/community/rankings",
"type": "basic"
},
{
"label": {
"en": "Full Listings"
},
"link": "/community/listings",
"type": "basic"
},
{
"type": "space"
},
{
"label": {
"en": "Hot this Month"
},
"type": "basic-loaded",
"datasource": "/community/hot"
},
{
"type": "space"
},
{
"type": "component",
"component": "nav",
"datasource": "/data/nav"
},
{
"type": "custom",
"content": "[social media HTML]"
}
]
},
{
"label": {
"en": "About"
},
"icon": "/images/nav/about.png",
"type": "children",
"children": [
{
"label": {
"en": "Our Values"
},
"link": "/about",
"type": "basic"
},
{
"label": {
"en": "In the News"
},
"link": "/about/media",
"type": "basic"
},
{
"label": {
"en": "The Team"
},
"link": "/about/#team",
"type": "basic"
},
{
"label": {
"en": "Guests"
},
"link": "/about/#guests",
"type": "basic"
},
{
"label": {
"en": "Partners"
},
"link": "/about/#partners",
"type": "basic"
},
{
"label": {
"en": "Media Kit"
},
"link": "/about/media",
"type": "basic"
},
{
"label": {
"en": "Contact Us"
},
"link": "/about/#contact",
"type": "basic"
},
{
"label": {
"en": "Upcoming Shows"
},
"type": "components",
"component": "navShow",
"datasource": "/data/shows/upcoming?limit=1"
}
]
},
{
"label": {
"en": "Help"
},
"icon": "/images/nav/help.png",
"link": "/",
"type": "children",
"children": [
{
"label": {
"en": "New here?"
},
"link": "/about",
"type": "basic"
},
{
"type": "space"
},
{
"label": {
"en": "Guides"
},
"link": "/help",
"type": "basic"
},
{
"label": {
"en": "Troubleshooting"
},
"link": "/help/#troubleshooting",
"type": "basic"
},
{
"label": {
"en": "Practice Activities"
},
"link": "/help#practice",
"type": "basic"
},
{
"label": {
"en": "Image Management"
},
"link": "/help/images",
"type": "basic"
},
{
"label": {
"en": "Photography 101"
},
"link": "/help/photography",
"type": "basic"
},
{
"label": {
"en": "What’s What?"
},
"link": "/community/whats",
"type": "basic"
},
{
"label": {
"en": "Hints and Tips"
},
"link": "/help/#hints",
"type": "basic"
},
{
"type": "space"
},
{
"label": {
"en": "Trouble Logging In?"
},
"link": "/help/account",
"type": "basic"
},
{
"label": {
"en": "Pricing Tiers"
},
"link": "/help/#account",
"type": "basic"
},
{
"label": {
"en": "Account FAQs"
},
"link": "/help/#account",
"type": "basic"
},
{
"label": {
"en": "Shows FAQs"
},
"link": "/help/shows",
"type": "basic"
},
{
"label": {
"en": "Reservations FAQs"
},
"link": "/help/faqs",
"type": "basic"
},
{
"type": "space"
},
{
"label": {
"en": "Contact Customer Support"
},
"link": "/help/contact",
"type": "basic"
},
{
"label": {
"en": "Site Feedback"
},
"link": "/help/contact#feedback",
"type": "basic"
}
]
},
{
"label": {
"en": "Settings"
},
"icon": "/images/nav/settings.png",
"link": "/",
"type": "children",
"children": [
{
"label": {
"en": "Personal Profile"
},
"link": "/account",
"type": "basic"
},
{
"label": {
"en": "Subscription Management"
},
"link": "/account/subscription",
"type": "basic"
},
{
"label": {
"en": "Alerts & Email Settings"
},
"link": "/account/#notifications",
"type": "basic"
}
]
}
]
나는 그것을 반복하고 아이들의 보조 탐색을 만들려고합니다.
최상위 수준은 쉽게 도달 할 수 있으며 두 번째 수준은 거의 존재합니다. 그러나 자식 (GetChildren 아래)에서 매핑 할 때 자식 배열 인 아무 것도 얻을 수 없으며 직접 개체 만 얻을 수 있습니다. 그래서 {child.link}를 얻을 수는 있지만 {child.label.en}은 오류를 반환합니다. 이 똑똑한 방법으로 접근해야합니까?
var GetChildren = React.createClass({
render: function() {
var childlink = this.props.data.map(function (child, i){
return (
<a key = {i} href={child.link}> {child.label.en}</a>
);
});
return (
<li className="childlist">
{childlink}
</li>
);
}
});
var MenuComponent = React.createClass({
getInitialState: function() {
return {
condition: [],
menuItem: []
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var items = result;
if (this.isMounted()) {
this.setState({
menuItem: items,
condition: false
});
}
}.bind(this));
},
render: function(condition) {
PrimaryMenu = this.state.menuItem || [];
return (
<aside>
<nav>
<ul>
{PrimaryMenu.map(function(el, i){
if (el.type == "basic") {
var PrimaryMenuLink = el.link;
} else {
PrimaryMenuLink = '/' +el.label.en.toLowerCase();
}
return <li key={i}> <a data-nav={'nav-' + el.label.en.toLowerCase()}>
{el.label.en}</a></li>
})}
</ul>
</nav>
{PrimaryMenu.map(function(el, i){
if (el.type == "children") {
return <section key={i} id={'nav-' + el.label.en.toLowerCase()}><ul><GetChildren data={el.children}/> </ul></section>
}
})}
</aside>
);
}
});
{child.label.en}을 (를) 호출 할 때 어떤 오류가 발생합니까? – hyde
@dilettante 여러분의 데이터에서'children'은'label' 속성을 가지고 있지 않습니다. 'label' 속성이있는 곳에서만 아이들을 보여주고 싶습니까? –
@hyde : 잡히지 않은 TypeError : 정의되지 않은 속성 'en'을 읽을 수 없습니다. – dilettante