反応高次成分を使用する - 具体的に反応性のある仕分け式を還元する

Question

このHOCの非常に基本的な部分を理解していないので、NPMで良好な牽引力を持っています。

私はReduxのストアからリストレンダリングTabListComponent持っている：私のMainComponentクラスで

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

を、私はTabListComponentとを輸入していますが反応し、ソート可能なホック

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が反応のために有効ではありません。私はそれをリファクタリングすることが大いに役立つと思います。

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