#javascript #reactjs
#язык JavaScript #реагирует на
Вопрос:
Фон
У меня проблема с динамическим встраиванием компонентов. Я работаю над CMS, которая позволит добавлять случайные компоненты CMS, написанные в react. Каждый компонент отображается в свой собственный div, все компоненты полностью разделены. Они не знают о существовании других компонентов. Я считаю, что это не «способ реагировать» на то, что я делаю, но это то, что у меня есть в моем проекте, и переписывать все это не вариант.
В целом этот подход хорошо работает, например, когда компоненты добавляются друг за другом, один за другим. Однако у меня есть несколько компонентов, в которые можно встроить другие компоненты. Я хочу как можно чаще повторно использовать компоненты.
Я попытаюсь описать пример: Допустим, у меня есть компонент-тизер, который отображает изображение, и при желании редактор может добавить в компонент-тизер другие компоненты: текст и/или Кнопку. Таким образом, в конечном итоге компонент тизера может содержать только изображение, иногда изображение и две кнопки, а иногда изображение, текст и кнопку.
Все компоненты добавляются редактором CMS, поэтому, когда я помещаю кнопку на страницу, она отображает кнопку. Когда редактор добавит тизер, он отобразится сам (пока без дочерних компонентов).
В чем проблема/вопрос:
Когда редактор теперь добавляет кнопку в компонент тизера, я не знаю, как с этим правильно обращаться.
При добавлении компонента он должен быть добавлен за пределы корневого div компонента тизера, в противном случае компонент тизера удалит все встроенные компоненты.
Что я мог сделать, я мог бы иметь компонент реестре, и когда, например, добавлена кнопка тизер компонент, я могу пройти кнопку компонента в JSON params к тизер компонента параметры, как, например, дети массив, и тизер будет иметь логику, например, основанные на какое-то имущество, понадобится соответствующий компонент (кнопка) из компонента реестр, и сделать его, однако , когда компонент добавляется в тизере, так как он является полностью независимым КМВ компонент, он не знает, что оно должно быть вынесено по тизеру компонента. Так что же у меня будет:
- Кнопка добавлена, поэтому она отобразит кнопку,
- Тизер будет уведомлен о том, что что-то изменилось, поэтому он отобразит себя и детей, поэтому кнопка будет отображаться дважды.
- То же самое произойдет при рендеринге страницы: Тизер отобразится сам, затем кнопка отобразится сама
Есть какие-нибудь идеи, как можно решить такой случай ?
Комментарии:
1. Образец вашего кода был бы полезен. Вы спрашиваете, как обрабатывать кнопки, добавленные в компоненты, которые отображают дочерние элементы (т. Е.
const onClick = () =gt; doSomething...;и подключенные к компоненту, напримерlt;Teasergt;lt;button onClick={onClick}gt;Click melt;/buttongt;lt;/Teasergt;), или как создавать компоненты на основе параметров компонентов? Я не понимаю, что вы подразумеваете под «Тизер будет уведомлен…».2. Если вы не покажете нам минимальный пример своего кода и того, как все работает, люди не смогут понять проблему и предложить потенциальные решения.
3. Один быстрый вопрос, чтобы понять вашу проблему : вы пытались создать кнопку в родительском компоненте и передать ее дочернему компоненту с помощью реквизита ??
4. @SILENT Я не могу добавить код. Я попытался объяснить как можно больше. У меня есть два компонента реакции, которые можно перетаскивать и сбрасывать. Один может быть встроен во второй. Все они отображаются в их собственном div-контейнере. Когда они оба находятся на странице, например, один встроен в первый, они оба вызовут визуализацию, так как встроенный компонент не знает, встроен он или нет.