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

问题描述

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

有问题的组件是输入。出现这种依赖关系是因为主索引页面调用InputSwitch组件来确定是显示输入还是开关元素，并且在 InputSwitch 的逻辑中，显示输入和开关之间的切换需要导入index.jsx。

在InputSwitch组件上，我尝试调用InputDefault组件作为Input的替代品，因为我认为它是输入设置的根组件，但它最终未能通过与道具相关的一些测试。

索引.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>
    );
  };

输入开关

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

感谢您提供的任何帮助！

标签： reactjseslint

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

问题描述

解决方案

推荐阅读