不建议将列表内单个元素抽象出组件,建议使用map
const SearchSuggestions = (props) => {
// renderSearchSuggestion() behaves as a pseudo SearchSuggestion component
// keep it self contained and it should be easy to extract later if needed
const renderSearchSuggestion = listItem => (
<li key={listItem.id}>{listItem.name} {listItem.id}</li>
);
return (
<ul>
{props.listItems.map(renderSearchSuggestion)}
</ul>
);
};
如果组件变的更复杂或者你想在其他地方使用这个组件,建议复制粘贴到一个新的组件,不要过早使用组合。