Деплой решения: https://zeroproger.github.io/test-selsup/
Весь код решения лежит в файле: src/ParamsEditor.tsx
Пример последовательности действий для добавления параметра с типом number:
- Изменяем интерфейс Param
export interface Param {
id: number
name: string
type: 'string' | 'number'
}- Изменяем интерфейс ParamValue
interface ParamValue {
paramId: number
value: string | number
}- Добавляем проверку на тип в метод render(), для рендера input с нужной нам логикой.
{param.type === 'number' && (
<>
<label htmlFor={String(param.id)}>{param.name}</label>
<input
type="number"
{/* Остальные props */}
/>
</>
)}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent