Question

我开始重构React项目。有一个巨大的组成部分，即1000余行代码。原因是某些服务中需要转移许多逻辑。

因此，我们尝试采用这种方法。

import [...]
import * as AppService from './services/MeetingsService';
import [...]

@withWindow
class App extends Component {
  static propTypes = {
    [...]
    breakpoint: PropTypes.string,
    dimensions: PropTypes.object,
    location: PropTypes.object,
    canCreate: PropTypes.bool,
    [...]
  };

  state = {
    [...]
  };

  componentDidMount() {
    AppService.handleComponetMount(this);
  }

  componentDidUpdate(prevProps, prevState) {
    AppService.handleComponentUpdate(this, prevProps, prevState);
  }

  componentWillUnmount() {
    AppService.handleComponentUnmount(this);
  }


  render() {

    return (
      <Container>
        [...]
      </Container>
    );
  }
}

ComponentsService 将组件中的this用作Component对象。

/**
 * Components componentDidMount handler.
 *
 * @param {Object} Component
 */
export const handleComponetMount = (Component) => {
  window.addEventListener('scroll', () => handleScroll(Component));
  const {
    [destructed componets props]
  } = Component.props;
  const { filters } = Component.state;
  const getParams = qs.parse(location.search);

  if (getParams.period === 'past') {
    filters.period = 'past';

    Component.setState({
      selectedTab: 'past',
    });
  }
};

如何使ESLint将服务中的代码视为组件的一部分？未使用的道具类型，未使用的状态等都有很多ESLint错误。

是否存在将组件功能移至服务的更好解决方案？

组件，服务和ESLint

0 个答案: