Компоненты, управляемые CMS в NextJS - PullRequest
Новая
       6

Компоненты, управляемые CMS в NextJS

1 голос
/ 20 января 2020

В настоящее время есть следующий JS сайт с несколькими страницами. Каждая страница может иметь несколько компонентов в любом порядке. Эти компоненты управляются CMS независимо от того, что выберет конечный пользователь.

Например, они могут иметь карусель, за которой следует сетка, за которой следует компонент абзаца.

На каждой странице я получаю начальные реквизиты, в которых будет список компонентов для этой страницы и данные для каждого компонента. 

Page1.getInitialProps = async () => {
   const res = await fetch('some api')
   const json = await res.json()
   return { data: json }
}

В конечном итоге это достигает родительского компонента верхнего уровня, который выглядит в данных и отображает соответствующий дочерний компонент на странице с оператором switch 

renderWidgets = (data) => {
  const pageWidgets = data.widgets.map((widget) => {
    switch(widget.type) {
      case WIDGETS.CAROUSEL:
        return <Carousel />;
      case WIDGETS.GRID:
        return <Grid />;
      case WIDGETS.PARAGRAPH:
        return <Paragraph />;
      default:
        return <div />;
    }
  });

  return pageWidgets;
}

render() {
  return (
    <div className="layout__main">
      {this.renderWidgets()}
    </div>
  );
}

Мой вопрос заключается в том, есть ли лучший способ обработать этот процесс компонента визуализации. Каждый раз, когда создается новый виджет, мне нужно обновлять оператор switch. Есть ли лучший способ рендеринга динамических c управляемых CMS компонентов на странице?

...