#reactjs
Вопрос:
Мне интересно, есть ли способ создавать элементы в массиве, а затем просто отображать их, если это возможно, это немного упростит мой код.
Прямо сейчас я определяю разделы для страницы в одном файле, затем они отправляются в другой и так далее, так что на данный момент это выглядит так
const heroSectionProps = { ... } const pageLayout = { sections: [{name: "Hero", props: heroSectionProps}] } и позже при рендеринге страницы я делаю следующее:
import { Hero } from "~/sections" const section = { Hero: Hero } export const Page = ({ sections, ...props }) =gt; { return sections.map(({ name, props }) =gt; { const Section = section[name]; return lt;Section {...props} /gt; }) } И это работает просто отлично, теперь вопрос в том, можно ли каким-то образом перейти к синтаксису, который выглядел бы более похожим на этот:
import { Hero } from "~/sections" const heroSectionProps = { ... } const pageLayout = { sections: [Hero(heroSectionProps)] } а затем на странице:
export const Page = ({ sections, ...props }) =gt; { return sections.map(Section =gt; (lt;Section /gt;)) } Таким образом, идея состоит в том, чтобы уже создать компоненты в объекте макета, а затем просто передать их на страницу для непосредственного их отображения. Конечно, делая это вышеуказанным способом, я получил ошибку:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: lt;HeroContainer /gt;. Did you accidentally export a JSX literal instead of a component? И другое подобное о недопустимом типе.
Так возможно ли это вообще, стоит ли и как?
Комментарии:
1. Я не знаю, можно ли создать массив функций, подобных тому, чего вы пытаетесь достичь. Но массив объектов, подобных вашей текущей рабочей логике, определенно будет работать. Может быть, вы могли бы просто упростить это до
sections: [{ section: Hero(heroSectionProps) }]. Не знаю, сработает ли это. Потому что это вызовет функцию сразу же. Никогда не делал этого раньше.
Ответ №1:
Вы можете визуализировать массив, если он заполнен отображаемыми значениями (строками, числами, элементами и компонентами). Итак, допустим, у нас есть массив компонентов:
import Hero from '../Hero'; const componentsArray = [lt;pgt;Hello world!lt;/pgt;, lt;divgt;lt;img src="images/flower.png" /gt;lt;/divgt;, lt;Hero {...heroSectionProps} /gt;]; Вы можете мгновенно отобразить его:
const Component = (props) =gt; { //... return componentsArray; };