Представление JSX / HTML / CSS в JSON - PullRequest
Новая
       12

Представление JSX / HTML / CSS в JSON

0 голосов
/ 20 марта 2019

Я разрабатываю сайт для пользователей, чтобы создавать индивидуальные макеты для мобильного устройства.В конечном итоге макеты будут помещены в приложение React JS и / или React Native.Пользователи смогут разделять экран на разделы, используя div, а затем помещать объекты в эти разделы.Это будет похоже на некоторых разработчиков приложений, которые вы видите в Интернете.

Что представляет собой эффективный способ представления этих макетов экрана.Я думал об использовании JSON следующим образом: 

var json = {
    components: [
        {
            type: "div",
            flex: 1,
            backgroundColor: "red",
            components: [
                {
                    type: "text",
                    value: "Hello World"
                }
            ]

        },
        {
            flex: 2,
            type: "div",
            components: [
                {
                    type: "div",
                    flex: 1,
                    backgroundColor: "green",
                    components: [
                        {
                            type: "text",
                            value: "Inner A"
                        }
                    ]
                },
                {
                    type: "div",
                    flex: 1,
                    backgroundColor: "blue",
                    components: [
                        {
                            type: "text",
                            value: "Inner B"
                        {
                            type: image,
                            src: "images/pic01.png"
                            width: "100%"
                        }
                    ]
                }
            ]
        }
    ]
}

Затем его можно преобразовать в код HTML / CSS: 

<div style="display: flex">
    <div style="flex: 1; background-color: red">
        <div>Hello World</div>
    </div>
    <div style="flex: 2; display: flex">
        <div style="flex: 1; background-color: green">
            <div>Inner A</div>
        </div>
        <div style="flex: 1; background-color: blue">
            <div>Inner B</div>
            <img src="images/pic01.png" style="width: 100%">
        </div>
    </div>
</div>

(Примечание. Фактический код будет в React JS /React Native, поэтому будет немного отличаться от описанного выше).

Если JSON не подходит, что мне делать вместо этого?Если JSON - это путь, я делаю это эффективно или я что-то упускаю?Я чувствую, что способ написания кода JSON немного запутан.

...