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

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

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

Ниже приведен код, который у меня есть до сих пор:

import * as React from "react";

export interface GenericInput
{
   handleChange(): void;
}

export interface GenericInputs
{
   inputs: GenericInput[];
}

export interface TextInput extends GenericInput
{
    label: string;
   forKey: string;
}

export interface RadioInput extends GenericInput
{
   label: string;
   value: string;
   columns: number;
}

export interface RadioInputs
{
   radioInputs: RadioInput[];
   forKey: string;
}

export class RadioGroup extends React.Component<RadioInputs, undefined>
{
   constructor(props: RadioInputs)
   {
      super(props);
      this.handleChange = this.handleChange.bind(this);
   }

   handleChange()
   {
      // handle delete
   }

   render()
   {
      return <div>
         { /*
            this.props.radioInputs.map((object, index) =>
               // Input
            )
            */
         }
      </div>;
   }
}

export class InputBuilder extends React.Component<GenericInputs, undefined>
{
   constructor(props: GenericInputs)
   {
      super(props);
   }

   render()
   {
      return <div>
         { /*
            this.props.inputs.map((object, index) =>
               //
            )
            */
         }
      </div>;
   }
}

Методы рендеринга не реализованы, так как у меня пока нет компонентов для них.

На данный момент я создал интерфейс GenericInput, а интерфейсы TextInput и RadioInput расширяют интерфейс GenericInput. Интерфейс GenericInput будет содержать свойства или функции, которые также будут использовать другие входы.

Внизу у меня есть два класса на данный момент: один для создания RadioGroup, а InputBuilder для создания входных данных для каждого из разделов «Изменить размер», «Повернуть» и «Вывод». Мне все еще нужно создать класс компонентов для ввода текста.

Свойства «forKey» будут относиться к переменным в интерфейсе настроек. Таким образом, когда я обрабатываю изменение ввода, он будет знать, какое свойство настроек ему нужно изменить.

Это то, что я получил с этим до сих пор. Я думаю, что я на правильном пути, я подумаю об этом еще немного и посмотрю, что еще я могу сделать, может быть, есть способ почистить это или сделать лучше. Одна из вещей, которую я хочу сделать правильно, — это сделать свойство «forKey» частью интерфейса GenericInput, поскольку все входные данные настроек нуждаются в этом, сказав это, возможно, тогда они им не нужны. Я подумаю об этом, чтобы посмотреть, смогу ли я найти лучший способ реализовать это.

Если у вас есть какие-либо мысли или предложения о том, что я сделал здесь, оставьте комментарий.