Простой список в реакции красивый и не работает

Я следую официальному курсу на egghead ( https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd и пример рабочего кода: https://codesandbox.io/s/52p60qqlpp) и написал это:

https://codesandbox.io/s/00k3rwq3qn

Тем не менее, он на самом деле не перетаскивает. Я просмотрел несколько примеров и не могу найти проблему в своем коде. Буду очень признателен кому-то за отзыв о моей ошибке.

Спасибо

Источник

3 ответа

Решение

Я не думаю, что использование встроенных стилей работает так хорошо с Draggable в react-beautiful-dnd, Если вы хотите применить стиль к Task компонент, который вы должны использовать styled-componentsэтот пример показывает, что он работает, если вы удалите конфигурацию встроенного стиля https://codesandbox.io/s/6lq0854m6r.

Скорее используйте styled-компоненты

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

const Container = styled.div`
  margin: 10px;
  border: 1px solid black;
`;

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

РЕДАКТИРОВАТЬ: кажется, вы можете применить встроенные стили к перетаскиваемому, но тогда вы должны расширить DraggableProps.styles в рамках дочерней функции Draggable компонент, смотрите здесь.

{(provided, snapshot) => (
    const style = {
        margin: "10px",
        border: "1px solid black",
        ...provided.draggableProps.style,
    };
    return <div
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
        style={style}
        >
        {this.props.task.content}
    </div>
)}
Источник

Ответ @Ian мне не подошел, поэтому я проверил react-beautiful-dndдокументы и придумал другой способ решения проблемы:

const styles = {
  backgroundImage: `url(${background.MEDIUM})`,
  backgroundSize: 'cover',
};

...

  {(provided) => {
    const otherProps = {
      ...provided.draggableProps,
      style: {
        ...provided.draggableProps.style,
        ...styles,
      },
    };
    return (<div
        {...otherProps}
        {...provided.dragHandleProps}
        ref={provided.innerRef}
        >
        {this.props.task.content}
    </div>)
  }}
Источник

Если вы пытаетесь создать перетаскиваемый список с функциональным компонентом React, используя официальный документ, а не используя библиотеку стилизованных компонентов, тогда он требует работы. Это даст вам некоторую ошибку. Поэтому примените стиль с помощью атрибута className, и тогда ошибка исчезнет, ​​и код также начнет работать.

Источник
Другие вопросы по тегам