Как из этого JSON создавать компоненты в React?

Дан JSON, полученный с сервера, с данными для веб-страницы. Необходимо на основе этого JSON-а реализовать адаптивную верстку страницы на React (иначе говоря, использовать JSON как источник данных о странице).

Как это реализовывается? Можете подсказать на простом примере?
c данными JSON еще не работал
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 2
Krasnodar_etc
@Krasnodar_etc
little front
Если очень коротко, про массив components из json-a:

1) Делаешь сами компоненты, кладёшь их в папку, условно, components
2) В components/index.js пишешь именованные экспорты этих компонентов, имя экспотра должно совпадать с type у объектов в json-e. Пример:
// index.js
export { default as GalleryComponent } from './GalleryComponent';
export { default as GridComponent } from './GridComponent';


3) Перебираешь массив компонентов, на каждой итерации "выбираешь" по полю type, какой компонент отрисовывать

import AllComponents from 'components/index'; // index можно не указывать, оставил для наглядности
....
// где-то в методе render:
const componentFromJson; // условно, это твой объект из JSON-a

const CurrentComponent = AllComponents[componentFromJson.type];
return (
  <CurrentComponent metadata={ componentFromJson.metadata } /> // пропс metadata только для примера, не забудь прокинуть остальные данные из JSON-a через пропсы
);


Я думаю, метод понятен, как выводить под-компоненты для GridComponent можно разобраться самому

Теперь про форму. У тебя есть массив fields. Его нужно разбить на два массива main и additional, насколько я понимаю. И просто вывести эти массивы в двух разных блоках, через input-ы.
Можешь попробовать сам, если не получится - закинь свой код в codesandbox и кинь на него ссылку, так будет проще помочь.
Ответ написан
@lasthead
А у тебя классы этих компонентов сделаны уже и тебе только компоненты динамически добавлять? тогда я бы посмотрел в сторону Higher-Order Components.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
04 апр. 2020, в 13:12
25000 руб./за проект
04 апр. 2020, в 13:09
2000 руб./за проект
04 апр. 2020, в 11:34
3000 руб./за проект