React Beautiful dnd 中的简单列表不起作用答案

【问题标题】：simple list in react beautiful dnd not workingReact Beautiful dnd 中的简单列表不起作用
【发布时间】：2019-03-21 20:25:35
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： reactjs react-dnd react-beautiful-dnd

【解决方案1】：

我认为在Draggable 中使用内联样式在react-beautiful-dnd 中效果不佳。如果您想将样式应用于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>
)}

【讨论】：

感谢 Ian，我没有意识到内联样式会导致与 dnd 冲突。为了以后的注意，className/css 文件可以正常工作。
太棒了，看看我上面关于使用内联样式的编辑，如果你喜欢内联样式，你只需要扩展可拖动样式:)。
@IanLoubser 是正确的。欢迎您使用内联样式，您只需要确保应用可拖动的内联样式-@987654331 的作者@
对于任何遇到可拖动对象不移动且未显示错误的人，这可能是解决方案。谢谢伊恩

【解决方案2】：

@Ian 的回答对我来说效果不佳。所以我检查了react-beautiful-dnd's documents 并想出了另一个解决方法来解决这个问题：

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

【讨论】：

【解决方案3】：

如果你尝试使用官方文档而不是使用 styled-components 库来构建带有 React 功能组件的可拖动列表，那么它需要工作。它会给你一些错误。因此，使用 className 属性应用样式，然后错误就会消失，代码也将开始工作。

【讨论】：