connectDragSource 为地图中的每个元素(拖放:React DnD)
connectDragSource for Each Element in map (Drag and Drop: React DnD)
如何使每个项目都是可放置的?
作为 map()
函数 return new Array 我决定将 connectDragSource
传递到方法中,但我仍然取回 droppable Aray insted 可掉落的每个物品(形状)
for..in
,forEach
,for..of
也没有取回想要的结果
有人解决过这样的问题吗?
import React, { Component } from "react";
import { Segment, Icon } from "semantic-ui-react";
import { DragSource } from "react-dnd";
import ShapeItem from "./ShapeItem";
class Shapes extends Component {
displayShapes = (shapes, connectDragSource) =>
shapes.length > 0 &&
shapes.map((shape) =>
connectDragSource(
<div key={shape.id}>
<Segment>
<Icon name={shape.name} size={shape.size} color={shape.color} />
</Segment>
</div>
)
);
render() {
const { shapes, connectDragSource} = this.props;
return (
<div>
{this.displayShapes(shapes, connectDragSource)}
</div>
);
}
}
const spec = {
beginDrag(props) {
return {
shapeId: props.shapes.id
};
}
};
const collect = (connect, monitor) => ({
connectDragSource: connect.dragSource(spec),
isDragging: monitor.isDragging()
});
export default DragSource("shape", spec, collect)(Shapes);
至于文档 http://react-dnd.github.io 只找到了这个:React 元素作为可拖动节点。为此,请在渲染函数中将任何 element
替换为 this.props.connectDragSource(element)
。
您可能想要创建一个单独的组件来呈现每个项目并使其成为拖动源。您还需要 return 规范中的 canDrag 函数为真。
免责声明:我还没有测试下面的代码。
shapes.js
import React, { Component } from "react";
import Item from './item.js';
class Shapes extends Component {
render() {
const { shapes } = this.props;
return (
<div>
{
shapes.length > 0 &&
shapes.map((shape) => <Item key={shape.id} shape={shape} />)
}
</div>
);
}
}
export default Shapes;
item.js
import React, { Component } from "react";
import { Segment, Icon } from "semantic-ui-react";
import { DragSource } from "react-dnd";
class Item extends Component {
render() {
const { shape, connectDragSource} = this.props;
return connectDragSource(
<div>
<Segment>
<Icon name={shape.name} size={shape.size} color={shape.color} />
</Segment>
</div>
)
}
}
const spec = {
beginDrag(props) {
return {
shapeId: props.shapes.id
};
},
canDrag(props, monitor) {
return true;
},
endDrag(props, monitor) {
console.log("You dropped .... into " + monitor.getDropResult());
}
};
const collect = (connect, monitor) => ({
connectDragSource: connect.dragSource(spec),
isDragging: monitor.isDragging()
});
export default DragSource("shape", spec, collect)(Item);
如何使每个项目都是可放置的?
作为 map()
函数 return new Array 我决定将 connectDragSource
传递到方法中,但我仍然取回 droppable Aray insted 可掉落的每个物品(形状)
for..in
,forEach
,for..of
也没有取回想要的结果
有人解决过这样的问题吗?
import React, { Component } from "react";
import { Segment, Icon } from "semantic-ui-react";
import { DragSource } from "react-dnd";
import ShapeItem from "./ShapeItem";
class Shapes extends Component {
displayShapes = (shapes, connectDragSource) =>
shapes.length > 0 &&
shapes.map((shape) =>
connectDragSource(
<div key={shape.id}>
<Segment>
<Icon name={shape.name} size={shape.size} color={shape.color} />
</Segment>
</div>
)
);
render() {
const { shapes, connectDragSource} = this.props;
return (
<div>
{this.displayShapes(shapes, connectDragSource)}
</div>
);
}
}
const spec = {
beginDrag(props) {
return {
shapeId: props.shapes.id
};
}
};
const collect = (connect, monitor) => ({
connectDragSource: connect.dragSource(spec),
isDragging: monitor.isDragging()
});
export default DragSource("shape", spec, collect)(Shapes);
至于文档 http://react-dnd.github.io 只找到了这个:React 元素作为可拖动节点。为此,请在渲染函数中将任何 element
替换为 this.props.connectDragSource(element)
。
您可能想要创建一个单独的组件来呈现每个项目并使其成为拖动源。您还需要 return 规范中的 canDrag 函数为真。
免责声明:我还没有测试下面的代码。
shapes.js
import React, { Component } from "react";
import Item from './item.js';
class Shapes extends Component {
render() {
const { shapes } = this.props;
return (
<div>
{
shapes.length > 0 &&
shapes.map((shape) => <Item key={shape.id} shape={shape} />)
}
</div>
);
}
}
export default Shapes;
item.js
import React, { Component } from "react";
import { Segment, Icon } from "semantic-ui-react";
import { DragSource } from "react-dnd";
class Item extends Component {
render() {
const { shape, connectDragSource} = this.props;
return connectDragSource(
<div>
<Segment>
<Icon name={shape.name} size={shape.size} color={shape.color} />
</Segment>
</div>
)
}
}
const spec = {
beginDrag(props) {
return {
shapeId: props.shapes.id
};
},
canDrag(props, monitor) {
return true;
},
endDrag(props, monitor) {
console.log("You dropped .... into " + monitor.getDropResult());
}
};
const collect = (connect, monitor) => ({
connectDragSource: connect.dragSource(spec),
isDragging: monitor.isDragging()
});
export default DragSource("shape", spec, collect)(Item);