#javascript #reactjs #react-props
Вопрос:
В настоящее время я работаю над компонентом боковой панели. Эта боковая панель содержит несколько карточек, например, одну с вводом и списком, одну с вводом и кнопками и одну только с кнопками. Теперь он должен быть как можно более изменяемым. Я подумал о передаче массивов с необходимыми типами и метками в карточке в компонент боковой панели.
Так что для вида, как на первой карточке:
Это может быть так:
const data=[ { label:"Systems", type: "heading" }, { label:"", type: "input", onChange: "search" }, { label: "", type: "ul", elements: [ "Item#1", "Item#2", "Item#3", "Item#4", ] } ] lt;Sidebar card={data} /gt; Я не знаю, лучше ли это делать в таком стиле и с трудом обрабатывать все возможные варианты, или лучше просто сосредоточиться на этих жестко закодированных макетах и позволить им заполняться данными (я делал это с ~6 типами других card элементов раньше). Или есть совершенно другой способ создания настраиваемых элементов, подобных этому?
Комментарии:
1. Поскольку у вас будет более одной карты, «lt;Карта боковой панели={данные} /gt;» следует заменить чем-то вроде «lt;Карта боковой панели={данные} /gt;lt;Боковая панельgt;{карты.карта(карта =lt;Боковая панельgt;gt; lt;Боковая панельgt;gt;lt;Данные компонента MyCard={карта} /gt;)}lt;Данные компонента MyCard={карта} /gt;lt;/Боковая панельgt;». Но это очень широкий вопрос, и я сомневаюсь, что здесь, в Stack Overflow, на него будет дан полный ответ.
2. Мне трудно понять, почему у вас в качестве данных есть «onChange», «тип» и другие данные? Вы пытаетесь создать систему веб — конструктора?
3. Теперь, когда вы упомянули об этом, да, это своего рода веб-конструктор. Я думаю, что я придерживаюсь заранее определенного подхода.