Wie Eigenschaft Aufruf Komponente innerhalb der gleichen Komponente mit ReactJS?

Question

Ich baue ein Sidebar-Menü mit Untermenü-Ebenen, und ich diesen Code über das Menü und die Untermenüs zu bauen:

Menü

Sidebar:

import React from 'react'; 

import SidebarMenuItem from './SidebarMenuItem'; 

var menuData = require("./data/menu.json"); 

class SidebarMenu extends React.Component { 
    constructor(props) 
    { 
     super(props); 

     this.state = { expanded: true }; 
    }; 


    render() { 

     return (
     <div> 
      { 
      menuData.map((item, index) => <SidebarMenuItem id={ index.toString()} key={index.toString()} {...item} />) 
      } 
     </div> 
    ); 
    }; 
} 

export default SidebarMenu; 

SidebarMenuItem:

Obwohl ich die Untermenüs auf dem Bildschirm sehen kann, erhalte ich den folgenden Fehler:

Warning: SidebarMenuItem: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 

Ein weiterer Hinweis, dass etwas falsch ist, ist die Ausgabe der Konsole:

0 
1 
undefined <-- I was supposed to get 11 and 12 here, as this option has 2 submenus 
2 

Und schließlich meine menu.JSON Daten:

[ 
    { 
    "title": "Option1", 
    "link": "www.google.com", 
    "icon": "fa-edit" 
    }, 
    { 
    "title": "Option2", 
    "link": "", 
    "icon": "fa-hello", 
    "submenu": 
    [ 
     { 
     "title": "SubOption2.1", 
     "link": "wwww.yahoo.com", 
     "icon": "fa-asterisk" 
     }, 
     { 
     "title": "SubOption2.2", 
     "link": "wwww.tisafe.com", 
     "icon": "fa-save" 
     } 
    ] 
    }, 
    { 
    "title": "Option3", 
    "link": "www.mezasoft.com", 
    "icon": "fa-save" 
    } 
] 

Hilfe appreaciated um herauszufinden, was mit meinem Code falsch ist.

Answer 1

Sie erhalten die Warnung, weil Schlüssel ein eingeschränktes Attribut ist und nicht als Propeller übergeben werden kann, ändern Sie es in keyValue. Auch erhalten Sie undefined, wenn Sie this.props.id verwenden, weil Sie in Ihrem SidebarMenuItem render function für Untermenüs immer noch die gleiche Komponente aufrufen, und dort übergeben Sie nicht die id als prop. Sie können das im folgenden Ausschnitt sehen. Ich hoffe, es

class SidebarMenu extends React.Component { 
 
    constructor(props) 
 
    { 
 
     super(props); 
 

 
     this.state = { expanded: true }; 
 
    }; 
 

 

 
    render() { 
 
     var menuData = [ 
 
    { 
 
    "title": "Option1", 
 
    "link": "www.google.com", 
 
    "icon": "fa-edit" 
 
    }, 
 
    { 
 
    "title": "Option2", 
 
    "link": "", 
 
    "icon": "fa-hello", 
 
    "submenu": 
 
    [ 
 
     { 
 
     "title": "SubOption2.1", 
 
     "link": "wwww.yahoo.com", 
 
     "icon": "fa-asterisk" 
 
     }, 
 
     { 
 
     "title": "SubOption2.2", 
 
     "link": "wwww.tisafe.com", 
 
     "icon": "fa-save" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "title": "Option3", 
 
    "link": "www.mezasoft.com", 
 
    "icon": "fa-save" 
 
    } 
 
]; 
 
     return (
 
     <div> 
 
      { 
 
      menuData.map((item, index) => <SidebarMenuItem id={ index.toString()} keyValue={index.toString()} {...item} />) 
 
      } 
 
     </div> 
 
    ); 
 
    }; 
 
} 
 

 
class SidebarMenuItem extends React.Component { 
 

 
    render() { 
 

 
     console.log('in render',this.props); 
 

 
     return (
 
      <div> 
 
       <a href={this.props.link}>{this.props.title}<i className={'fa ' + this.props.icon}/></a> 
 

 
       {this.props.submenu ? this.props.submenu.map((subitem, index) => <SidebarMenuItem keyValue={this.props.id + index.toString()} {...subitem} />) : null } 
 

 
      </div> 
 
      ) 
 
    } 
 

 
} 
 

 
SidebarMenuItem.propTypes = { 
 
    id: React.PropTypes.string, 
 
    keyValue: React.PropTypes.string, 
 
    title: React.PropTypes.string, 
 
    ref: React.PropTypes.string, 
 
    icon: React.PropTypes.string, 
 
    submenu: React.PropTypes.array 
 
} 
 

 
ReactDOM.render(<SidebarMenu/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>