Реагировать и не работать на машинописи

Question

Я пытался использовать этот реагировать и на реагировать typescript. Пример, не работающий над проектом сценария типа, любой знает, как сделать это правильно на реагирующем наборе сценария

Answer 1

Попробуйте что-то вроде этого.

import React, { Component } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

// fake data generator
const getItems = (count: number, offset: number): object =>
  Array.from({ length: count }, (v, k): number => k).map(
    (k: number): {} => ({
      id: `item-${k + offset}`,
      content: `Item: ${k + offset}, Random value: ${Math.round(
        Math.random() * 100
      )}`,
      color:
        Math.random() > 0.66
          ? "pink"
          : Math.random() > 0.5
          ? "lightgreen"
          : "beige"
    })
  );

// a little function to help us with reordering the result
const reorder = (list: [], startIndex: number, endIndex: number): object => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);
  return result;
};

/**
 * Moves an item from one list to another list.
 */
const move = (
  source: any,
  destination: any,
  droppableSource: any,
  droppableDestination: any
): {} => {
  const sourceClone = Array.from(source);
  const destClone = Array.from(destination);
  const [removed] = sourceClone.splice(droppableSource.index, 1);

  destClone.splice(droppableDestination.index, 0, removed);

  let result: any = {};
  result[droppableSource.droppableId] = sourceClone;
  result[droppableDestination.droppableId] = destClone;

  return result;
};

const grid = 4;

const getItemStyle = (isDragging: boolean, draggableStyle: any): object => ({
  // some basic styles to make the items look a bit nicer
  userSelect: "none",
  padding: grid * 2,
  margin: `0 0 ${grid}px 0`,

  // change background colour if dragging
  background: isDragging ? "lightgreen" : "lightgrey",

  // styles we need to apply on draggables
  ...draggableStyle
});

const getListStyle = (isDraggingOver: boolean): object => ({
  background: isDraggingOver ? "lightblue" : "#eee",
  padding: grid,
  margin: "3px",
  width: 250
});

interface State {
  list1: object;
  list2: object;
  list3: object;
}

class App extends Component<State> {
  state: State = {
    list1: getItems(5, 1),
    list2: getItems(4, 6),
    list3: getItems(6, 10)
  };

  /**
   * A semi-generic way to handle multiple lists. Matches
   * the IDs of the droppable container to the names of the
   * source arrays stored in the state.
   */
  droppableIds = {
    droppable1: "list1",
    droppable2: "list2",
    droppable3: "list3"
  };

  getList = (id: string): any => this.state[this.droppableIds[id]];

  onDragEnd = (result: any) => {
    const { source, destination } = result;

    // dropped outside the list
    if (!destination) {
      return;
    }

    if (source.droppableId === destination.droppableId) {
      const items: object = reorder(
        this.getList(source.droppableId),
        source.index,
        destination.index
      );

      let copiedState: any = Object.assign({}, this.state);

      if (source.droppableId === "droppable1") {
        copiedState.list1 = items;
      } else if (source.droppableId === "droppable2") {
        copiedState.list2 = items;
      } else if (source.droppableId === "droppable3") {
        copiedState.list3 = items;
      }

      this.setState(copiedState);
    } else {
      const result: any = move(
        this.getList(source.droppableId),
        this.getList(destination.droppableId),
        source,
        destination
      );

      this.setState({
        list1: result.droppable1 ? result.droppable1 : this.state.list1,
        list2: result.droppable2 ? result.droppable2 : this.state.list2,
        list3: result.droppable3 ? result.droppable3 : this.state.list3
      });
    }
  };
  render() {
    const lists = [
      {
        droppableId: "droppable1",
        listId: "list1",
        title: "List A"
      },
      {
        droppableId: "droppable2",
        listId: "list2",
        title: "List B"
      },
      {
        droppableId: "droppable3",
        listId: "list3",
        title: "List C"
      }
    ];
    return (
      <div style={{ display: "flex" }}>
        <DragDropContext onDragEnd={this.onDragEnd}>
          {lists.map((list, listIndex) => (
            <Droppable
              key={"list-droppable-" + listIndex}
              droppableId={list.droppableId}
            >
              {(provided: any, snapshot: any) => (
                <div
                  ref={provided.innerRef}
                  style={getListStyle(snapshot.isDraggingOver)}
                >
                  <h4>{list.title}</h4>
                  {this.state[list.listId] &&
                    this.state[list.listId].map((item: any, index: number) => (
                      <Draggable
                        key={item.id}
                        draggableId={item.id}
                        index={index}
                      >
                        {(provided: any, snapshot: any) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            style={getItemStyle(
                              snapshot.isDragging,
                              provided.draggableProps.style
                            )}
                          >
                            <div style={{ background: item.color }}>
                              {item.content}
                            </div>
                          </div>
                        )}
                      </Draggable>
                    ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          ))}
        </DragDropContext>
      </div>
    );
  }
}

export default App;

А вот рабочий пример codesandox