複雑な階層のリアクションイベントハンドリング

Question

フレームワークを学ぶ方法としてReactJSでゲームプロジェクトを開始しましたが、私は問題を抱えています。

私はreact-hexgridを中心コンポーネントとして使用しています。これは、六角形に基づいています。私は6つの<HexTile/>を2つの<Hexagon/>とそれぞれ<GameLayout/>のボードで構成しています。ここでは&をドラッグできます。 <HexTile/>

が<GameLayout/>上に完全に配置されなければならない、私は、これはそれが最初のヘクスがドロップだ示すfirst変数と<Hexagon/>たびにドロップ達成します。問題は、移動が完了している間に残りのブロック<HexTile/>をブロックする必要があることです。私は<HexTile/>を<TileList/>の中に入れたいですが、ドラッグイベントリスナーが<Hexagon/>コンポーネントにバインドされているので、<TileList/>に移動が行われていることを伝える方法がわかりませんので、他の<HexTile/>が無効になります。

<TileList/>は、<HexTile/>のイベントを受け入れすることができますか？ <HexTile/>がここ<TilesLayout/>コンポーネントに基づいています（ゲーム自体はベースとしてこの例を取る）：https://github.com/Hellenic/react-hexgrid/tree/master/examples/drag-and-drop

Answer 1

あなたは何ができる何かのように：私は強くあなたをお勧めします

class TileList extends Component { 
    constructor(props){ 
    super(props) 
    this.state = { isTileMoving: false } 

    this.onDragStart = this.onDragStart.bind(this) 
    this.onDragEnd = this.onDragEnd.bind(this) 
    } 

    onDragStart(evt, source) { 
    this.setState({ isTileMoving: true }) 
    } 

    onDragEnd(evt, source) { 
    this.setState({ isTileMoving: false }) 
    } 

    // ... Rest of your things 

    render() { 
    <div> 
     <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} /> 
     <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} /> 
     <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} /> 
     <Hexagon onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} /> 
    </div> 
} 

そして、あなたのHexagon

class Hexagon extends Component { 
    constructor(props){ 
    super(props) 
    this.state = // Hexagon state 
    } 

    onDragStart(evt, source) { 
    this.props.onDragStart(evt, source) 
    // Rest of your drag 
    } 

    onDragEnd(evt, source) { 
    this.props.onDragEnd(evt, source) 
    // Rest of dragEnd 
    } 

    // ... Rest of your things 

    render() { 
    //whatever your render is 
    } 
}