Question

我无法理解这个HOC的一个非常基本的部分，它对NPM有很好的吸引力，所以我猜这里有一个明显的答案，我不知道。

我有一个TabListComponent，它从redux商店中呈现一个列表：

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

......不能靠自己存在。它们必须包装在对象文字或类中。 e.g。

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

使用React高阶组件 - 具体反应 - 可排序 - 与redux

1 个答案: