React - List Items道具不會進入渲染列表組件

我是React Js的新手，我試圖讓List組件注入不同的ListItems。但是當物品通過時，道具不會通過。出了什麼問題？React - List Items道具不會進入渲染列表組件

更新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

在此先感謝我的朋友們。

來源

2017-02-27 Son Dang

你拼錯items爲item：

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

來源

2017-02-27 07:10:43

我有這樣一個可怕的錯誤，感謝銘很快 –

喜明很快，你會介意幫助我知道爲什麼道具不通過，如名稱，圖標，href ... http://codepen.io/viiiprock/pen/vxOgmr?editors=0010 –

好吧，我覺得自己只是傳遞：

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

來源

2017-03-12 07:08:06

React - List Items道具不會進入渲染列表組件

回答

相關問題