ESLint & React

ESLint & React

eslint error && findDOMNode

error Do not use findDOMNode react/no-find-dom-node

https://stackoverflow.com/questions/40499267/react-dnd-avoid-using-finddomnode

bug

solution & not ReactDOM.findDOMNode

ESLint solution

import React,{
  Component,
  // useRef,
  // useState,
  // useEffect,
} from 'react';
import { connect } from 'dva';
import './index.less';

import { compareNextAndThisProps } from '../../../utils/pageUtils';

import { Header } from "./Header";
import { GoToTop } from "./GoToTop";
import { IndicatorCards } from "./IndicatorCards";
import { TrendingView } from "./TrendingView";
import { ChannelDistribution } from "./ChannelDistribution";
import { DeviceTypeDistribution } from "./DeviceTypeDistribution";
import { RegionDistribution } from "./RegionDistribution";

import {
  Row,
  Col,
  Divider,
} from "antd";

const mapStateToProps = ({ mirrorHeader, dashboard }) => ({
  activeTypeId: mirrorHeader?.activeTypeId,
  activeVersion: dashboard?.activeVersion,
  activeOs: dashboard?.activeOs,
  dashboard,
});

@connect(mapStateToProps)
class Overview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      updatePropsLock: false,
    };
  }
  componentDidMount() {
    this.initData();
    setTimeout(() => {
      this.unlockProps();
    }, 1000);
    this.gototopRefNode.addEventListener(`click`, (e) => {
      this.dashboardOverviewRefNode.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth',
        });
        setTimeout(() => {
          if(this.gototopRefNode){
            this.gototopRefNode.style.display = "none";
          }
        }, 1000);
    });
    this.dashboardOverviewRefNode.addEventListener(`scroll`, (e) => {
      const scrollTop = e.target.scrollTop;
      if(scrollTop > 700){
        this.gototopRefNode.style.display = "block";
      } else {
        this.gototopRefNode.style.display = "none";
      }
    });
  }
  componentWillReceiveProps(nextProps) {
    const {
      updatePropsLock,
    } = this.state;
    if(updatePropsLock) {
      const {
        appIdIsNotEqual,
        osIsNotEqual,
        versionIsNotEqual,
      } = compareNextAndThisProps({
        nextProps,
        props: this.props,
      });
      if (appIdIsNotEqual || osIsNotEqual || versionIsNotEqual) {
        this.initData();
      };
    }
  }
  unlockProps = () => {
    this.setState({
      updatePropsLock: true,
    });
  };
  initData = () => {
    const {
      dispatch,
    } = this.props;
    dispatch({
      type: 'dashboard/fetchIndicatorsData',
    });
    dispatch({
      type: 'dashboard/fetchTrendData',
    });
    dispatch({
      type: 'dashboard/fetchChannelAndDeviceData',
    });
    dispatch({
      type: 'dashboard/fetchRegionData',
      payload: {
        code: 'all',
      },
    });
  };
  render() {
    const {
      dashboard: {
        indicatorsData: indicator_datas,
      },
    } = this.props;
    return(
      <>
        <Header initData={this.initData} />
        <div
          ref={node => this.dashboardOverviewRefNode = node}
          className="dashboard-overview"
        >
          <Row>
            <Divider className="divider-line" />
            <Col span={24} className="user-indicator">
              <IndicatorCards datas={indicator_datas} />
            </Col>
            <Col span={24} className="trending-chart">
              <TrendingView />
            </Col>
            <Col span={12} className="channel-distribution">
              <ChannelDistribution />
            </Col>
            <Col span={12} className="device-type-distribution">
              <DeviceTypeDistribution />
            </Col>
            <Col span={24} className="rigion-distribution">
              <RegionDistribution />
            </Col>
          </Row>
        </div>
        <GoToTop
          gototopRef={node => this.gototopRefNode = node}
        />
      </>
    );
  }
}

export default Overview;

import React, {
  Component,
  // useRef,
  // useState,
  // useEffect,
} from 'react';

class GoToTop extends Component {
  constructor(props){
    super(props);
    this.state = {
      text: "回到顶部",
    };
  }
  render() {
    const {
      text,
    } = this.state;
    const {
      gototopRef,
    } = this.props;
    return(
      <div className="go-to-top" ref={gototopRef}>
        <div
          className="go-to-top-box">
          <span className="go-to-top-text">{text}</span>
        </div>
      </div>
    );
  }
}

export {
  GoToTop,
};

export default GoToTop;

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---