Как перебрать структуру json-схемы в реагировать?

Question

Я новичок, чтобы реагировать. Я создал структуру JSON для реакции на сборку компонентов. Меня не волнует макет, так как я предполагаю вертикальный макет. Для разработки простой формы из файла json необходимо отобразить 8 компонентов следующим образом:

1. поле ввода имени
2. поле ввода для имени пользователя
3. поле ввода для электронной почты
4. поле ввода пароля
5. раскрывающийся список для страны

6. переключатель для пола

7. флажок для языка

8. кнопка отправки

Файл json выглядит следующим образом:

        {
"items": [
    {
        "componentType": "NameBox",
        "lable": "name",
        "properties": {
            "type": "string",
            "minLength": 3,
            "desicription": "Enter Your Name"
        }
    },
    {
        "componenetType": "UserNameBox",
        "lable": "username",
        "properties": {
            "type": "string",
            "minLength": 4,
            "maxLength": 8,
            "description": "Enter user name"
        }
    },
    {
        "componenetType": "EmailBox",
        "lable": "email",
        "properties": {
            "type": "string",
            "pattern": "^[a-z0-9]+(\\.[_a-z0-9]+)*@[a-z0-9-]+(\\.[a-z0-9-]+)*(\\.[a-z]{2,15})$",
            "description": "Enter email"
        }
    },
    {
        "componenetType": "PasswordBox",
        "lable": "password",
        "properties": {
            "type": "string",
            "pattern": "^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$",
            "description": "Enter password"
        }
    },
    {
        "componentType": "CountryDropDown",
        "lable": "country",
        "properties": {
            "type": "string",
            "enum": [
                "AUS",
                "IN",
                "JP",
                "US",
                "RU",
                "Other"
            ]
        }
    },
    {
        "componenetType": "RadioButton",
        "lable": "gender",
        "properties": {

            "type": "string",
            "anyOf": [
                {
                    "type": "radios",
                    "key": "radios",
                    "enum": [
                        {
                            "value": "male",
                            "name": "Male"
                        },
                        {
                            "value": "female",
                            "name": "Female"
                        }
                    ]
                }


            ]

        }
    },
    {
        "componenetType": "CheckBox",
        "lable": "language",
        "properties": {

            "type": "array",
            "items": {
                "type": "string",
                "enum": [
                    "english",
                    "spanish",
                    "japanese",
                    "french",
                    "hindi"
                ]
            }
        }

    },
    {
        "componenetType": "SubmitButton",
        "lable": "Submit",
        "properties": {

            "type": "submit",
            "title": "Submit"
        }

     }
 ]
}

Теперь мой вопрос: как мне перебрать этот файл json и получить каждый компонент в реакции? Как мне подойти в реакции?

Answer 1

При добавлении к 0xc14m1z ответу вам нужно использовать карту для перебора свойств и отображения формы:

class A extends React.Component {
    render() {
        const a = {
            "items": [
                {
                    "componentType": "NameBox",
                    "lable": "name",
                    "properties": {
                        "type": "string",
                        "minLength": 3,
                        "description": "Enter Your Name"
                    }
                },
                {
                    "componenetType": "UserNameBox",
                    "lable": "username",
                    "properties": {
                        "type": "string",
                        "minLength": 4,
                        "maxLength": 8,
                        "description": "Enter user name"
                    }
                },
            ]
        }

        return <div>
            {a.items.map(value => {
                return <div>
                    <h3>{value.lable}</h3><input type={value.properties.type} minLength={value.properties.minLength} maxLength={value.properties.maxLength} placeholder={value.properties.desicription} />
                </div>
            })}
        </div>
    }
}

ReactDOM.render(<A />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Мне кажется, это просто массив объектов.

Итерацию в массиве можно выполнить с помощью:

myjson.forEach(singleObject => {
  // my things here
})

Или, если вам нужно сопоставить эти объекты с компонентами для их визуализации:

myjson.map(singleObject => {
  // return a rendered component here
})

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