Использование компонента более высокого порядка React - в частности, реагировать-сортировка-hoc с redux

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

У меня есть TabListComponent, который отображает список из хранилища redux:

return this.props.tabs.map((tab) => {
    return (<li>{tab.title}</li>) 
})

В моем классе MainComponent я импортирую TabListComponent и response-sortable-hoc

import TabListComponent from './tabListComponent';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';

Я стараюсь не слишком сильно отклоняться от документации, поэтому вот как я визуализирую компоненты

const SortableItem = SortableElement(TabListComponent); //I wrap TabListComponent directly 

const SortableList = SortableContainer(() => {
    return (
        <ul className="tabs-inline-block">
            <SortableItem />
        </ul>
    );
});
onSortEnd () {
    console.log("I don't need a callback, but this gets called anyway. Is this necessary?");
}

render () {
    return (
        <div>
            <SortableList axis={'x'} onSortEnd={this.onSortEnd}/>
        </div>
    )
}

Начальный введите здесь описание изображения

При перетаскивании initial


reactjs drag-and-drop higher-order-functions
person BackbonePrincess    schedule 09.09.2016    source источник
comment
Что конкретно вы не понимаете? CSS при перетаскивании? Обратный вызов onSortEnd ()?   -  person JorgeObregon    schedule 10.09.2016

Ответы (1)


arrow_upward
-2
arrow_downward

Стилистическая проблема: вам следует реорганизовать свой _1 _...

return this.props.tabs.map(({title}) => <li>{title}</li>)

Что еще более важно, ваш SortableList недействителен для React. Думаю, его рефакторинг очень поможет.

const SortableItem = SortableElement(TabListComponent);

const SortableList = SortableContainer(({items}) =>
  <ul className="tabs-inline-block">
    {items.map((item, i) =>
      <SortableItem
        key={i}
        index={i}
        title={item.title}  // assumes `item` has a title property
      />
    )}
  </ul>
);

class SortableComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [{title: 'one'}, {title: 'two'}]
    };
  }

  onSortEnd({old, new}) {
    this.setState({
      items: arrayMove(this.state.items, old, new)
    });
  }

  render() {
    return (
      <SortableList
        items={this.state.items} // put your item models here
        onSortEnd={this.onSortEnd.bind(this)}
      />
    );
  }
}

Возможно, вы захотите узнать больше о классах ES6. Посмотрите на их аналоги в ES5 с помощью объектных литералов. Если вы новичок в Javascript или ES6, иногда бывает сложно следовать руководствам по React. Вещи как...

method() {
  return 2 + 3;
}

... не могут существовать сами по себе. Они должны быть заключены в литерал объекта или класс. например

const x = {
  method() {
    return 2 + 3;
  }
};
person wpcarro    schedule 10.09.2016