Блог

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

Моя попытка найти решение:

1. Создайте компонент, в котором соответствующим образом размещены поля для текста и ввода
2. Сохраните весь компонент JSX в базе данных и извлеките его по запросу
3. Визуализируйте извлеченный JSX в компоненте контейнера

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

Не храните весь элемент внутри базы данных. Вам просто нужно сохранить соответствующие данные, которые войдут в объект ввода:

Например:

Начальное значение, значение, тип, заполнитель, метка, область видимости, …и т. Д

Затем, когда вы получаете данные:

 const [inputData, setInputData] = useState(iunitialInputData)  useEffect(() =gt; { //Fetch input data from DB data = apiCall() setInputData(data) })  return ( //render inputs here  { inputData?.length? inputData.map(item =gt; {  //Put data inside here return( lt;input value={item.value} placeholder={item.placeholder} /gt; ) }) : lt;pgt;No data!lt;/pgt; } )