React - List Items 道具不会传递到渲染的 List 组件中

Question

我是 React Js 的新手，我尝试制作一个 List 组件来注入不同的 ListItem。但是当物品通过时，道具不会通过。出了什么问题？

2017 年 3 月 12 日更新

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

在此先感谢我的朋友们。

Answer 1

您将 items 拼错为 item:

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

Answer 2

好的我自己找刚刚通过：

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

React - List Items 道具不会传递到渲染的 List 组件中

React - List Items props doesn't pass into rendered List component

components

list

listitem

reactjs