Не удалось выполнить инвариант: невозможно собрать без ссылки - PullRequest
Новая
       33

Не удалось выполнить инвариант: невозможно собрать без ссылки

1 голос
/ 17 марта 2020

Я пытаюсь реализовать react-beautiful-dnd. У них есть видео-гид, которому я следовал, и дважды проверил и сравнил мой код с кодом в видео несколько раз, но я продолжаю получать эту ошибку.

Я опубликую свой код здесь, но у меня есть здесь также установите песочницу:

https://codesandbox.io/s/xenodochial-euclid-m5sfk?fontsize=14&hidenavigation=1&theme=dark

Я пытаюсь настроить простую реализацию react-beautiful-dnd. У меня есть 4 файла. Индекс, столбец и отдельный элемент (в моем коде это задание называется «делом»):

Индекс: 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "@atlaskit/css-reset";
import { DragDropContext } from "react-beautiful-dnd";
import initialData from "./initial-data";
import Column from "./column";

class App extends Component {
  state = initialData;

  onDragEnd = result => {
    console.log("drag ended");
    // TODO reorder our column
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        {this.state.columnOrder.map(columnId => {
          const column = this.state.columns[columnId];
          const tasks = column.taskIds.map(taskId => this.state.tasks[taskId]);

          return <Column key={column.id} column={column} tasks={tasks} />;
        })}
      </DragDropContext>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Column.jsx: 

import React, { Component } from "react";
import styled from "styled-components";
import { Droppable } from "react-beautiful-dnd";

import Task from "./task";

const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
`;
const Title = styled.h3`
  padding: 8px;
`;
const TaskList = styled.div`
  padding: 8px;
`;

export default class Column extends Component {
  render() {
    return (
      <Container>
        <Title>{this.props.column.title}</Title>
        <Droppable droppableId={this.props.column.id}>
          {provided => (
            <TaskList
             innerRef={provided.innerRef}
              {...provided.droppableProps}
               >
              {this.props.tasks.map((task, index) => (
                <Task key={task.id} task={task} index={index} />
              ))}
              {provided.placeholder}
            </TaskList>
          )}
        </Droppable>
      </Container>
    );
  }
}

Task.jsx: 

import React, { Component } from "react";
import styled from "styled-components";
import { Draggable } from "react-beautiful-dnd";

const Container = styled.div`
  border: 1px solid lightgrey;
  border-radius: 2px;
  padding: 8px;
  margin-bottom: 8px;
  background-color: white;
`;

export default class Task extends Component {
  render() {
    return (
      <Draggable draggableId={this.props.task.id} index={this.props.index}>
        {provided => (
          <Container
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            innerRef={provided.innerRef}
          >
            {this.props.task.content}
          </Container>
        )}
      </Draggable>
    );
  }
}

исходные данные: 

const initialData = {
  tasks: {
    "task-1": { id: "task-1", content: "Take out the garbage" },
    "task-2": { id: "task-2", content: "Watch my favorte show" },
    "task-3": { id: "task-3", content: "Charge my phone" },
    "task-4": { id: "task-4", content: "Cook dinner" }
  },
  columns: {
    "column-1": {
      id: "column-1",
      title: "To Do",
      taskIds: ["task-1", "task-2", "task-3", "task-4"]
    }
  },
  columnOrder: ["column-1"]
};

export default initialData;

Это как-то связано с innerRef, я думаю, но не могу понять, что это я делаю по-другому

1 Ответ

1 голос
/ 17 марта 2020

Переключение innerRef на ref решило это за меня.

...