动态创建组件阵列

Question

我已经学习了本教程，但要求有点不同。我有一个函数getArrayList，它应该生成一个ItemComponent的数组。返回的组件将接收作为数组的items道具。

function getArrayList(ItemComponent) {
return null // return a new component that renders an array of ItemComponent 
}
class Link extends React.Component {
render() {
return <a href={ this.props.item.href }>{ this.props.item.text }</a>;
}
}
const LinkList = getArrayList(Link);
document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
if(LinkList) {
let items = [
{ href:"https://www.yahoo.com", text:"Yahoo" },
{ href:"https://www.bing.com", text:"Bing" }
];
ReactDOM.render(<LinkList items={items} />, rootElement);
console.log(rootElement.innerHTML);
}

Answer 1

您可以执行类似的操作

const getArrayList = (ItemComponent) => {
const ListComponent = ({items}) => {
return <div>{items.map(item => <ItemComponent item={item} />)}</div>
}   
return ListComponent
}

Answer 2

您可以这样做：

const LinkList = (items) => (
<div>
{items.map(i => (
<Link key={i.href} item={i}/> // pass the item as props ...
))}
</div>
);

注意：当您动态创建组件列表时，react要求key属性。