以不同的顺序展示我们的UI组件

我们使用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>
    )
  }
}

参考资料:

• Slides from my talk: Building Multi-tenant UI with React