Question

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

更新2017年1月，

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组件

2 个答案: