Использования Реагировать высший порядок компонент - Specifcally реагируют трёхсортную Временную

Question

У меня возникли проблемы с пониманием очень основная частью этого HOC, которая имеет хорошую тягу на НОМ, так что я угадывании есть простой ответ здесь:

Где мои ранее существовавшие компоненты идут в примере, который он дает на NPM. Предполагается, что {value} заменен на <myComponent />? Я знаю, что эти обертки должны взять мой компонент, в данном случае компоненты, в качестве аргументов, но я думаю, что мне не хватает чего-то целого здесь. Любая помощь оценивается. Его пример документация ниже

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 будет обернуть компонент извлечь выгоду из react-sortable-hoc функций. Таким образом, вы должны написать что-то подобное (при условии, <myComponent /> является элементом списка):

const SortableItem = SortableElement(myComponent); 

Это создаст элемент списка, который будет оказывать myComponent с дополнительными функциями.

({value}) => <li>{value}</li> - это функция без гражданства, представляющая компонент React. Вы могли бы писать:

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