ReactDnD 정렬 요소가 드래그 할 때 업데이트되지 않음

Question

안녕하세요. code을 따라이 코드를 example과 유사하게 만들었습니다. 내 구성 요소가 예상대로 작동합니다 (끌어서 놓을 때 올바르게 정렬됩니다.)하지만 카드를 끌 때 불투명도 0은 ReactDnD 예제에서와 같이 작동하는 "느낌"을 위해 끌기 요소를 따라야합니다. "키 속성에 연결되어 있어야합니다이 경우

1 .- :

는 work

내 코드

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactDnDBackend = require('react-dnd-html5-backend'); 
var DragDropContext = require('react-dnd').DragDropContext; 
var DragSource = require('react-dnd').DragSource; 
var DropTarget = require('react-dnd').DropTarget; 

var Card = React.createClass({ 
    render: function() { 
     var connectDragSource = this.props.connectDragSource; 
     var isDragging = this.props.isDragging; 
     var connectDropTarget = this.props.connectDropTarget; 

     return connectDragSource(connectDropTarget(
      <div style={{ 
       marginBottom: '5px', 
       background: '#fff', 
       border: '1px dashed #ccc', 
       padding: '10px 16px', 
       opacity: isDragging ? 0.5 : 1, 
      }}> 
       {this.props.name} 
      </div> 
     )); 
    } 
}); 

var Source = { 
    beginDrag: function (props) { 
     return { 
      name: props.name, 
      index: props.index 
     }; 
    } 
}; 

Card = DragSource('CARD', Source, function (connect, monitor) { 
    return { 
     connectDragSource: connect.dragSource(), 
     isDragging: monitor.isDragging() 
    }; 
})(Card); 


var Target = { 
    hover: function (props, monitor, component) { 
     var dragIndex = monitor.getItem().index, 
      hoverIndex = props.index; 
     if (dragIndex === hoverIndex) { 
      return; 
     } 

     var hoverBoundingRect = ReactDOM.findDOMNode(component).getBoundingClientRect(), 
      hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top)/2, 
      clientOffset = monitor.getClientOffset(), 
      hoverClientY = clientOffset.y - hoverBoundingRect.top; 


     if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { 
      return; 
     } 

     if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { 
      return; 
     } 

     props.moveItem(dragIndex, hoverIndex); 

     monitor.getItem().index = hoverIndex; 
    } 
}; 

Card = DropTarget('CARD', Target, function (connect) { 
    return { 
     connectDropTarget: connect.dropTarget() 
    }; 
})(Card); 

var Container = React.createClass({ 
    getInitialState: function() { 
     return { 
      items: [ 
       {id: 1, name: 'Item 1', order: 0, bg: '#b5b5b5'}, 
       {id: 4, name: 'Item 4', order: 1, bg: 'red'}, 
       {id: 2, name: 'Item 2', order: 2, bg: 'blue'}, 
       {id: 3, name: 'Item 3', order: 3, bg: 'green'}, 

       {id: 5, name: 'Item 5', order: 4, bg: '#b5b5b5'}, 
       {id: 8, name: 'Item 8', order: 5, bg: 'red'}, 
       {id: 6, name: 'Item 6', order: 6, bg: 'blue'}, 
       {id: 7, name: 'Item 7', order: 7, bg: 'green'}, 
      ] 
     }; 
    }, 
    moveItem(dragIndex, hoverIndex) { 
     var items = this.state.items.slice(0), 
      dragItem = items[dragIndex]; 

     items.splice(dragIndex, 1); 
     items.splice(hoverIndex, 0, dragItem); 

     this.setState({ 
      items: items 
     }); 
    }, 
    render: function() { 
     var self = this; 

     return (
      <div style={{ 
       width: '600px' 
      }}> 
       {this.state.items.map(function (card, i) { 
        return (
         <Card 
          key={i} 
          index={i} 
          name={card.name} 
          moveItem={self.moveItem} 
         /> 
        ); 
       })} 
      </div> 
     ); 
    } 
}); 
Container = DragDropContext(ReactDnDBackend)(Container); 

ReactDOM.render(
    <Container />, 
    document.getElementById('app') 
); 

Answer 1

이 좋아하면 코드의 변화의 몇 가지가 필요 내 참조 card.id ", 주문을 변경하면 React가 업데이트 할 요소를 알고 싶어하기 때문입니다.

render: function() { 
    var self = this; 

    return (
     <div style={{ 
      width: '600px' 
     }}> 
      {this.state.items.map(function (card, i) { 
      return (
       <Card 
        key={card.id} 
        index={i} 
        name={card.name} 
        moveItem={self.moveItem} 
       /> 
      ); 
      })} 
     </div> 
    ); 
    } 

2 .- 이 예와 같은 방법으로 해결하려면 은 불투명이어야합니다 : 0 또는 1

var Card = React.createClass({ 
    render: function() { 
    var connectDragSource = this.props.connectDragSource; 
    var isDragging = this.props.isDragging; 
    var connectDropTarget = this.props.connectDropTarget; 

    return connectDragSource(connectDropTarget(
     <div style={{ 
      marginBottom: '5px', 
      background: '#fff', 
      border: '1px dashed #ccc', 
      padding: '10px 16px', 
      opacity: isDragging ? 0 : 1, 
     }}> 
      {this.props.name} 
     </div> 
    )); 
    } 
}); 

지노, 불투명도 0.5 무슨 일이 일어나고 있었다보고 만 있었다