Wie übergibt man index in rowRenderer?

Question

https://codesandbox.io/s/qYEvQEl0

Ich versuche, eine Liste von draggables zu machen, scheint alles nur in Ordnung, dass ich nicht herausfinden kann, wie ‚index‘ passiert in rowRenderer

Wenn ich rowRenderer=props => <Row {...props}/> tun, index in erfolgreich bestanden.

Aber wenn ich tun:

const SortableRow = SortableElement(Row)

rowRenderer=props => <SortableRow {...props}/>,

index irgendwie blockiert, in <Row/>

passieren gescheitert Grundsätzlich verstehe ich nicht, was schief gehen kann, wenn wickeln Sie Ihre <Row/> Komponente mit einem HOC ein? Warum einige Requisiten kommen, andere nicht?

Answer 1

Kopieren Sie den Index in eine andere, benutzerdefinierte prop ...

rowRenderer = props => { 
    console.log(props.index); 
    return <SortableRow {...props} indexCopy={props.index} />; 
}; 

Dann innerhalb der untergeordneten Komponente, auf diese benutzerdefinierte verweisen stattdessen prop.

const Row = ({ indexCopy , style }) => { 
    console.log(indexCopy); 
    return (
    <div style={style}> 
     <span>drag</span> 
     <input placeholder={'haha'} /> 
     <span>index={indexCopy || 'undefined'}</span> 
    </div> 
); 
}; 

Ich bin nicht allzu vertraut mit HOV, aber ich vermute, dass die react-sortable-hoc Bibliothek wird die impliziten index und key Werte Strippen. Solange du sie jedoch in ihre eigenen Requisiten kopierst, sollte es dir gut gehen.