удаление предупреждений об импорте / отсутствии цикла из проекта

Question

Работает над удалением этого предупреждения из проекта github. Нужна помощь в понимании того, как правильно выделить логику. У меня вопрос к этому компоненту, они объединили логику для флажков, переключателей и входов. Имеет ли смысл разделить эту логику на компонент ввода / переключения / флажка?

Данный компонент является входом. Зависимости возникают потому, что главная страница индекса вызывает в компоненте InputSwitch , чтобы определить, отображать ли вход или элемент переключателя, а в логике InputSwitch переключение между отображением входа и переключателя требует импорта index.jsx .

в компоненте InputSwitch Я пытался вызвать компонент InputDefault в качестве замены для Input , так как я предполагал, что это rootКомпонент для входных настроек один, но в итоге он проваливает несколько тестов, связанных с реквизитом.

index.jsx

displaySwitch = () => {
    const {
      type,
      id,
      name,
      label,
      value,
      checked,
      uncheckedValue,
    } = this.props;
    if (type === 'switch' && label && name) {
      return (
        <InputSwitch
          id={id}
          name={name}
          label={label}
          value={value}
          checked={checked}
          uncheckedValue={uncheckedValue}
        />
      );
    }
    return null;
  };

displayContent = () => {
    const {
      dark, small, accordion, large, type,
    } = this.props;
    return (
      <div
        className={`${dark ? css.dark : ''} ${large ? css.large : ''} ${
          small ? css.small : ''
        } ${type === 'hidden' ? css.hidden : ''}`}
      >
        {!accordion && (
          <div className={css.labelNoAccordion}>{this.displayLabel()}</div>
        )}
        {this.displayDefault()}
        {this.displayCheckbox()}
        {this.displayCheckboxGroup()}
        {this.displaySelect()}
        {this.displayTextarea()}
        {this.displayTag()}
        {this.displaySwitch()}
        {this.displayLocation()}
        {this.displaySubmit()}
        {this.displayError()}
      </div>
    );
  };

InputSwitch

displaySwitchHidden = () => {
    const {
      id, name, label, value, uncheckedValue,
    } = this.props;
    const { checked, key } = this.state;
    return (
      <div className={css.switchHidden}>
        <Input
          id={id}
          key={key}
          type="checkbox"
          name={name}
          label={label}
          value={value}
          uncheckedValue={uncheckedValue}
          checked={checked}
        />
      </div>
    );
  };

Похоже, что в нем много функциональностив этот компонент, и кажется, что имеет смысл выделить это.

ссылка на соответствующие части этого проекта: https://github.com/ifmeorg/ifme/tree/master/client/app/components/Input

Спасибо за любую помощь!

Answer 1

Я хотел обновить это так, как я смог решить эту проблему.

Я заметил, что вход в InputSwitch был просто флажком. Вместо этого я импортировал в компонент InputCheckbox и запустил все пройденные тесты.