在 ReactJs 中，在拖放操作期间执行渲染是否可能/可行？答案

【问题标题】：In ReactJs is it possible/feasible to perform rendering during a Drag/Drop operation?在 ReactJs 中，在拖放操作期间执行渲染是否可能/可行？
【发布时间】：2018-10-21 06:08:28
【问题描述】：

在 ReactJs 中，在拖放操作期间执行渲染是否可能/可行？

我想到的特定用例是尝试在 ReactJS 中构建一个月视图日历，在前后拖动多天事件期间，日历上的所有其他日期事件将向后移动以显示 ( whist 使用仍在拖动）在实际“放弃”它之前对所有事件的影响。（即假设任何一天只有一个事件，因此页面的目标是在用户移动一个事件时移动/交换当天事件）

类似于将影片剪辑拖放到影片时间轴上，您会看到剪辑在拖动过程中如何交换，突出显示如果用户释放鼠标按钮并执行“拖放”会发生什么。

问题：这在 ReactJS 中是否可行/推荐？如果是，这里的概念是什么？即在拖动事件处理程序期间会进行什么调用来触发“刷新”？或者，如果在拖动事件处理程序中您只是重新定位其他组件/事件，React 是否只是在拖动过程中自动渲染？

【问题讨论】：

这可以与其他资源一起提供帮助：github.com/react-dnd/react-dnd
可以尝试示例 react dnd 库并告诉您面临的问题。

标签： reactjs

【解决方案1】：

是的 - 下面是一个例子：

import React, { Component } from 'react';
import 'rc-slider/assets/index.css';
import './GcSlider.css';

export class GcSlider extends Component {
  state = {
    value: 50,
  };

  handleChange = (value) => {
    this.setState({ value });
  };

  buttonClick = (e) => {
    console.log('Button Clicked');
  }

  render() {
    const { value } = this.state;

    let divs = [1,2,3,4,5,6,7,8,9].map(item => <div className="box {item}">Item {item}</div>)
    console.log('DIVS = ' + divs)

    return (
      <div>  
        <div style={{alignContent:true}}>
          <h1>Hello</h1>
        </div>
        <div className="wrapper">
          { divs }
          <div className="box {item}"></div>
          <div className="box {item}">Item B</div>
          <div className="box {item}">Item C</div>
          <div class="overlay" draggable>oevrlay</div>
        </div>
      </div>
    )
  }
}

export default GcSlider

和css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

.overlay {
  position: absolute;
  top: 0px;
  height:80px;
  border: 2px solid red;
}

【讨论】：