Блог

Поэтому я наткнулся на какой-то интересный код, и мне стало интересно, можно ли его «подсластить».

Компоненты поставляются в виде:

 const sections = {
  Home: dynamic(() => import("./Sections/Home")),
  Example: dynamic(() => import("./Sections/Example")),
};
 

И затем они отображаются как:

 export default function Page({ page }) { 

  return (
    <main>
      {page.sections.map((section, index) => {
        const SectionComponent = sections[section.type] || null;

        return (
          <SectionComponent
            key={`${pageKey}-${index}`}
            id={index}
            fields={section.fields}
          />
        );
      })}
    </main>
  );
}
 

Итак, каков был бы синтаксис для прямого рендеринга

 sections[section.type]({id: index, fields: section.fields})
 

сделать что-то подобное внутри карты, чтобы уменьшить код, без SectionComponent промежуточной переменной?

разделы[раздел.тип]({идентификатор: индекс, поля: раздел.поля})

От того, что вы предлагаете, не так много пользы, напротив, в приведенном выше коде теперь вы вызываете компонент как функцию, а не визуализируете его как элемент, как это было раньше, это разные вещи. В большинстве случаев вы хотите отобразить его как элемент, иначе вы можете получить неожиданное поведение, особенно с крючками.

Код, с которым вы столкнулись, является рекомендуемым подходом для этого.