我想知道为什么我不能使用ReactDnD和mapDispatchToProps来使用我的一些组件。
我正在尝试将服务拖放到客户端,但我无法在endDrag方法的serviceSpec上找到我的调度函数。
考虑我的Service组件上的mapDispatchToProps:
const mapDispatchToProps = (dispatch) => ({
dragService: (service) => { dispatch(dragService(service)) },
dropService: (service, clientTarget) => { dispatch(dropService(service, clientTarget)) }
});
将订单绑定在一起的高阶函数DragSource + Service + State + Dispatch:
var reduxConnectedService = connect(mapStateToProps, mapDispatchToProps)(Service);
export default DragSource('service', serviceSpec, collect)(reduxConnectedService);
render()方法:
render (){
const { isDragging, connectDragSource, service } = this.props;
return connectDragSource(
<a className="panel-block is-active">
<CategoryIcon category={service.category}/>
{service.name} | ${service.price}
</a>
)
}
用于实现dragSource规范的spec对象(这是问题):
const serviceSpec = {
beginDrag(props) {
return props.service;
},
endDrag(props, monitor, component){
console.log(props);
}
}
endDrag函数的console.log只显示我的服务对象,因为在beginDrag函数上返回:
{service: {…}}
但我的计划是在endDrag上发送动作dropService,但我不能。文件说(http://react-dnd.github.io/react-dnd/docs/api/drag-source):
beginDrag(props,monitor,component):必需。拖动开始时,将调用beginDrag。您必须返回描述被拖动数据的纯JavaScript对象。您返回的内容是有关拖动源的放置目标可用的唯一信息,因此选择他们需要知道的最小数据非常重要。您可能想要将组件引用到其中,但您应该非常努力地避免这样做,因为它会耦合拖动源和放置目标。从这个方法返回类似{id:props.id}的东西是个好主意。
我不相信我应该在beginDrag定义上返回dropService(dispatch)函数。因此,在数小时尝试使其工作之后,我开始直接通过父组件(ServiceList)将dropService函数作为prop传递:
{this.props.filteredServices.map((service, index) => (
<Service service={service} key={service.name} dropService={this.props.dropService}/>
))}
这样我可以像我想的那样在endDrag方法上调度dropService动作,console.log可以证明:
{service: {…}, dropService: ƒ}
我可以让它工作,但我无法理解为什么我不能使用mapDispatchToProps工作。使用React-DnD时是否有任何限制,或者我做错了什么?
任何帮助将不胜感激,我不能为这个怀疑而死。先感谢您。
你的问题是这两行:
var reduxConnectedService = connect(mapStateToProps, mapDispatchToProps)(Service);
export default DragSource('service', serviceSpec, collect)(reduxConnectedService);
请注意顺序:将Service
包装到Redux容器中。然后使用DragSource
容器包装Redux容器。因此,在组件树中,拖动容器是Redux容器的父级,这意味着它不会从中接收Redux道具。
要解决此问题,请将拖动容器设为Redux容器的子容器。你可以通过交换DragSource()
和connect()
来调用:
var dragService = DragSource('service', serviceSpec, collect)(Service);
var reduxConnectedService = connect(mapStateToProps, mapDispatchToProps)(dragService);