Reagieren - Listenelemente Requisiten werden nicht in gerenderte Listenkomponente übergeben

Question

Ich bin neu bei React Js, ich habe versucht, eine List-Komponente zu erstellen, um verschiedene ListItems zu injizieren. Aber wenn Elemente bestanden, geht Requisiten nicht. Was ist schief gelaufen?

aktualisieren 12Mar, 2017

const List = (props) => { 
    const ComponentToRender = props.component; 
    let content = (<div></div>); 

    if (props.items) { 
    content = props.items.map((item, index) => (
     <ComponentToRender key={`item-${index}`} item={item}/> 
    )); 
    } else { 
    content = (<ComponentToRender />); 
    } 

    return (
     <ul> 
     {content} 
     </ul> 
); 
} 

const ListItem = (props) => ( 
    <li> 
     <a href={props.href}> 
     <i className={props.icon}></i> 
     {props.name} 
     </a> 
    </li> 
); 

const el = [ 
    {href: "#", icon: "fa fa-phone", name: "bannana"}, 
    {href: "#", icon: "fa fa-phone", name: "apples"} 
]; 

ReactDOM.render(
    <div> 
    <List component={ListItem} items={el} /> 
    </div> 
    ,document.getElementById('app') 
); 

See on codepen

Vielen Dank im Voraus meine Freunde.

Answer 1

Sie items als item falsch geschrieben:

ReactDOM.render(
    <div> 
    <List component={ListItem1} items={["banana", "apples"]} /> 
    <List component={ListItem1} items={["banana", "apples"]} /> 
    </div> 
    ,document.getElementById('app') 
); 

Answer 2

In Ordnung finde ich es mir passieren gerade:

<ComponentToRender key={`item-${index}`} {...item}/>