reactjs - react 美丽的dnd中的简单列表不起作用

Question

我一直在关注 Egghead 的官方类(class)(https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd 和示例工作代码:https://codesandbox.io/s/52p60qqlpp)并写了这个:

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

但是，它实际上并没有拖放。我查看了几个示例，但无法在我的代码中发现问题。我非常感谢有人能就我的错误提供反馈。

谢谢

Answer 1

我不认为在 react-beautiful-dnd 中使用内联样式与 Draggable 配合得很好。如果你想将样式应用到 Task 组件，你应该使用 styled-components，这个示例显示如果你删除内联样式配置它就可以工作 https://codesandbox.io/s/6lq0854m6r .

而是使用样式组件

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>
    );
  }
}

编辑:您似乎可以将内联样式应用于可拖动对象，但您应该在 Draggable 组件的子函数中扩展 DraggableProps.styles，请参阅 here .

{(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>
)}