Question

正在从github项目中删除此警告。需要帮助了解如何正确地分离出逻辑。我的问题是，对于此组件，它们组合了复选框，开关和输入的逻辑。将此逻辑拆分为输入/切换/复选框组件是否有意义？

有问题的组件是输入。之所以会发生这种依赖关系，是因为主索引页调用 InputSwitch 组件以确定是否显示输入或开关元素，并且在InputSwitch的逻辑内，显示输入和开关之间的切换需要导入 index.jsx 。

在 InputSwitch 组件上，我已尝试调用 InputDefault 组件来代替 Input ，因为我认为它是根目录组件用于输入设置之一，但最终失败了一些与道具相关的测试。

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 ，并运行所有通过的测试。

从项目中删除导入/无周期警告

1 个答案: