höherer Ordnung Component Reagieren - specifcally reagieren sortierbar-hoc

Question

Ich habe Probleme beim Verständnis eines sehr grundlegenden Teil dieser HOC, die eine gute Traktion auf NPM hat so bin zu raten, ich gibt es eine einfache Antwort hier:

Wo gehen meine bereits vorhandenen Komponenten in das Beispiel, das er auf NPM gibt. Soll {value} durch <myComponent /> ersetzt werden? Ich weiß, dass diese Wrapper meine Komponenten, in diesem Fall Komponenten, als Argumente verwenden sollen, aber ich denke, dass ich etwas Integrales hier vermisse. Jede Hilfe wird geschätzt. Sein Beispiel Dokumentation ist unter

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-list-hoc'; 

const SortableItem = SortableElement(({value}) => <li>{value}</li>); 

const SortableList = SortableContainer(({items}) => { 
    return (
     <ul> 
      {items.map((value, index) => 
       <SortableItem key={`item-${index}`} index={index} value={value} /> 
      )} 
     </ul> 
    ); 
}); 

class SortableComponent extends Component { 
    state = { 
     items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'] 
    } 
    onSortEnd = ({oldIndex, newIndex}) => { 
     this.setState({ 
      items: arrayMove(this.state.items, oldIndex, newIndex) 
     }); 
    }; 
    render() { 
     return (
      <SortableList items={this.state.items} onSortEnd={this.onSortEnd} /> 
     ) 
    } 
} 

render(<SortableComponent/>, document.getElementById('root')); 

Answer 1

SortableElement wird wickeln Sie Ihre Komponente von react-sortable-hoc Funktionen zu profitieren. Also muss man so etwas schreiben (<myComponent /> Unter der Annahme, ein Element der Liste):

const SortableItem = SortableElement(myComponent); 

Dies wird ein Listenelement erstellen, die myComponent mit zusätzlichen Features machen werden.

({value}) => <li>{value}</li> ist eine zustandslose Funktion, die eine React-Komponente darstellt. Sie könnten schreiben haben:

const myComponent = ({value}) => <li>{value}</li>; 
const SortableItem = SortableElement(myComponent);