使用React高阶组件-特定于redux的react-sortable-hoc

Question

我很难理解这个HOC的一个非常基本的部分，它对NPM有很好的牵引力，所以我猜这里有一个明显的答案，我遗漏了。

我有一个从redux store呈现列表的TabListComponent：

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

在我的MainComponent类中，我导入了TabListComponent和react-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>
    )
}

初始

​

拖动时

​

Answer 1

一个风格问题:你应该重构你的TabListComponent...

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;
}

...cannot是独立存在的。它们必须包装在对象文字或类中。例如：

const x = {
  method() {
    return 2 + 3;
  }
};