actionview react前端Grids.jsx源码解读：这个组件负责根据传入的属性动态生成网格行，并根据折叠状态决定哪些行需要渲染详细信息，哪些行仅渲染空白占位符。

原创

a772304419 2024-09-10 09:30:16 ©著作权

文章标签 前端 react.js 前端框架 ide 占位符 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者a772304419的原创作品，请联系作者获取转载授权，否则将追究法律责任

Grids.jsx源码

/root/workspace/actionview/av-github-source-code/actionview-fe/app/components/gantt/Grids.jsx

actionview react前端Grids.jsx源码解读：这个组件负责根据传入的属性动态生成网格行，并根据折叠状态决定哪些行需要渲染详细信息，哪些行仅渲染空白占位符。_react.js

import React, { PropTypes, Component } from 'react';
import _ from 'lodash';

const $ = require('$');
const GridItem = require('./GridItem');
const GridEmptyItem = require('./GridEmptyItem');

export default class Grids extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    cellWidth: PropTypes.number.isRequired,
    collection: PropTypes.array.isRequired,
    dates: PropTypes.object.isRequired,
    foldIssues: PropTypes.array.isRequired,
    markedIssue: PropTypes.object.isRequired,
    today: PropTypes.string.isRequired
  }

  render() {
    const { 
      cellWidth,
      collection, 
      dates, 
      foldIssues, 
      markedIssue, 
      today=''
    } = this.props;

    let offset = 0;
    let clientWidth = document.body.clientWidth;
    let scrollTop = 0;
    let clientHeight = document.body.clientHeight;
    if ($('div.ganttview-slide-container').length > 0) {
      offset = $('div.ganttview-slide-container').scrollLeft();
      clientWidth = $('div.ganttview-slide-container').get(0).clientWidth;
      scrollTop = $('div.ganttview-slide-container').scrollTop();
      clientHeight = $('div.ganttview-slide-container').get(0).clientHeight;
    }

    const dates2 = _.flatten(_.values(dates));
    const newCollection = _.reject(collection, (v) => v.parent && foldIssues.indexOf(v.parent.id) != -1);

    const topInd = _.max([ _.floor(scrollTop / 31) - 10, 0 ]);
    const bottomInd = _.min([ _.floor((scrollTop + clientHeight) / 31) + 10, newCollection.length - 1 ]);

    return (
      <div
        className='ganttview-grid'
        style={ { width: dates2.length * cellWidth + 'px' } }>
      { _.map(newCollection, (v, key) => {
        if (key < topInd || key > bottomInd) {
          return (
            <GridEmptyItem
              key={ v.id }
              cellWidth={ cellWidth }
              dates={ dates2 } />
            );
        } else {
          return (
            <GridItem
              key={ v.id }
              offset={ offset }
              clientWidth={ clientWidth }
              cellWidth={ cellWidth }
              dates={ dates2 }
              issue={ v }
              markedIssue={ markedIssue }
              today={ today } />
            );
        }
      } ) }
      </div>);
  }
}

源码解读

这段代码定义了一个名为 Grids 的 React 组件，用于渲染甘特图中的网格行。这个组件负责根据传入的属性动态生成网格行，并根据折叠状态决定哪些行需要渲染详细信息，哪些行仅渲染空白占位符。

代码分析

导入模块

import React, { PropTypes, Component } from 'react';
import _ from 'lodash';

const $ = require('$');
const GridItem = require('./GridItem');
const GridEmptyItem = require('./GridEmptyItem');

React：React 的核心库。
PropTypes：用于定义组件的 prop 类型检查。
lodash：一个实用工具库，提供了很多常用的函数，如 _.flatten 和 _.reject。
$：jQuery 库，用于 DOM 操作。
GridItem：一个子组件，用于渲染包含具体任务信息的网格行。
GridEmptyItem：一个子组件，用于渲染空白占位符的网格行。

定义组件类

export default class Grids extends Component {
  constructor(props) {
    super(props);
  }

Grids 类继承自 Component，表示这是一个 React 组件。
constructor 构造函数初始化组件，并调用父类构造函数 super(props) 来初始化父类属性。

定义 prop 类型

static propTypes = {
    cellWidth: PropTypes.number.isRequired,
    collection: PropTypes.array.isRequired,
    dates: PropTypes.object.isRequired,
    foldIssues: PropTypes.array.isRequired,
    markedIssue: PropTypes.object.isRequired,
    today: PropTypes.string.isRequired
  }

propTypes 是一个静态属性，用于定义组件接受的 prop 类型。

cellWidth：每个单元格的宽度。
collection：一个数组，包含所有任务信息。
dates：一个对象，其键为月份，值为该月每一天的信息。
foldIssues：一个数组，包含需要折叠的任务 ID。
markedIssue：一个对象，表示标记的任务。
today：今天的日期字符串。

渲染方法

render() {
    const { 
      cellWidth,
      collection, 
      dates, 
      foldIssues, 
      markedIssue, 
      today=''
    } = this.props;

    let offset = 0;
    let clientWidth = document.body.clientWidth;
    let scrollTop = 0;
    let clientHeight = document.body.clientHeight;
    if ($('div.ganttview-slide-container').length > 0) {
      offset = $('div.ganttview-slide-container').scrollLeft();
      clientWidth = $('div.ganttview-slide-container').get(0).clientWidth;
      scrollTop = $('div.ganttview-slide-container').scrollTop();
      clientHeight = $('div.ganttview-slide-container').get(0).clientHeight;
    }

    const dates2 = _.flatten(_.values(dates));
    const newCollection = _.reject(collection, (v) => v.parent && foldIssues.indexOf(v.parent.id) != -1);

    const topInd = _.max([ _.floor(scrollTop / 31) - 10, 0 ]);
    const bottomInd = _.min([ _.floor((scrollTop + clientHeight) / 31) + 10, newCollection.length - 1 ]);

    return (
      <div
        className='ganttview-grid'
        style={ { width: dates2.length * cellWidth + 'px' } }>
      { _.map(newCollection, (v, key) => {
        if (key < topInd || key > bottomInd) {
          return (
            <GridEmptyItem
              key={ v.id }
              cellWidth={ cellWidth }
              dates={ dates2 } />
            );
        } else {
          return (
            <GridItem
              key={ v.id }
              offset={ offset }
              clientWidth={ clientWidth }
              cellWidth={ cellWidth }
              dates={ dates2 }
              issue={ v }
              markedIssue={ markedIssue }
              today={ today } />
            );
        }
      } ) }
      </div>);
  }
}