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道具不会进入渲染列表组件

回答

相关问题