React-dnd屏幕截图包括整个屏幕，而不仅仅是子组件

Question

我在我的react应用程序上使用react-dnd，功能完善，但仅当我的子组件关闭时，自动屏幕截图才起作用（请参见图像以获取描述）

完美的屏幕截图： good shot

错误的屏幕截图： bad shot

我的代码是task.js：

    import React from 'react';
    import { DragSource, DropTarget } from 'react-dnd';
    import { collectSource, collectTarget, taskSource, taskTarget } from '../../shared/lib/TaskDrag';

    class Task extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          taskType: props.taskType,
          metaLayerOpen: props.activate ? props.activate : false,
          // metaLayer is the part the opens to show the details of task
          // and if open react-dnd takes a strang screenshot
          mouseOver: false,
        };
      }

    //blah blah

    if( this.state.taskType == 'sprint' ) {
      return (
        <li
          className={classes}
          onClick={()=> this._changeState()}
        >
          <div className='task-flex_lvl1-constraints sprint'>
            <div
              style={{display: 'flex', alignItems: 'center'}}
              id={task.id}
            >
              <TaskItemCheckbox task={ task }/>
              <TaskItemName task={ task } />
            </div>
            <a className="sprProjectTaskTrigger" data-tip="Hold to drag"  onClick={(e) => e.stopPropagation()} >
              <Icon size='small' name='sidebar' file='sidebar' />
            </a>
          </div>
          { this.state.metaLayerOpen ?
            <div className='task-flex_lvl1-constraints feature' onClick={(e) => e.stopPropagation()}}>
              <div className='taskMetaContainer'>

               blah blah blah

              </div>
            </div>
            : null
          }
        </li>
      );
    } else { blah blah blah }

    render() {
        const { connectDropTarget, connectDragSource } = this.props;
        const { task, project } = this.props;

        return connectDragSource(connectDropTarget(this._taskTypeRender(task, project)));
      }
    }

export default DragSource(ItemTypes.TASK, taskSource, collectSource)(DropTarget(ItemTypes.TASK, taskTarget, collectTarget)(Task)

Project.js：

import React from 'react';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

export class ProjectAppComponent extends React.Component {
render() {
    const currentUser = this.props.current_user;
    const project     = this.props.project;

    return (
      <main id="project_layout">
        <ProjectMainContentComponent
          project={ project }
          miniScreen={ true }
          current_user={ currentUser }
        />;    
      </main>
    );
  }
}

导出默认的DragDropContext（HTML5Backend）（ProjectAppComponent）

据我所知，HTML5Backend无法确定子组件在打开时在何处结束。