我们使用props来定下我们显示的顺序. 我们的组件基于我们排好序的props进行渲染.
class PageSections extends Component {
render() {
const pageItems = this.props.contentOrder.map(
(content) => {
const renderFunc = this.contentOrderMap[content];
return (typeof renderFunc === 'function') ? renderFunc() : null;
}
);
return (
<div className="page-content">
{pageItems}
</div>
)
}
}