2つのコンポーネントをReact-Reduxでお互いに接続する方法

Question

railsプロジェクトでreact/reduxを使用しています。だから私は私のリスティングコンポーネントが優先される（サーバーサイドバーレンダリング）し、他のコンポーネントはリスティングアイテムにマウスオーバーすると詳細を表示したい。

マウスホバーイベント

各リスト項目の私の質問にマウスオーバーどのように私は、詳細コンポーネントにデータをリストを取得することができますされ

簡単な例

My Code on rails view 
= react_component('Listing', { data: @listings }, prerender: true) 
= react_component('Detail', { }, prerender: false) 

My Code on JS 
export default class Listings extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <ListingsWidget /> 
     </Provider> 
    ); 
    } 
} 

My Code for Detail 

export default class ListingDetail extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     < ListingDetail Widget /> 
     </Provider> 
    ); 
    } 
} 

Answer 1

ますそこにいくつかの疑似コードがありますが、あなたは3つのコンポーネントを持っています：Listings、ListingsItem、およびListingsItemDetail。 ListingsItemの要素にReact onMouseOver属性があり、イベントハンドラを呼び出して状態を設定します。 ListingsItemDetailコンポーネントがListingsItemの場合は、状態をチェックしてListingsItemDetailを表示するかどうかを確認します。 ListingsItemDetailが他の場所にある場合は、プロップとして渡されたイベントハンドラを呼び出すか、Reduxなどを使用して、表示するListingsItemDetailのIDを設定します。

編集は - 一部の例を追加しました：

const ListItem = React.createClass({ 
    getInitialState() { 
     return {showDescription: false} 
    }, 

    handleMouseOver() { 
     this.setState({showDescription: true}) 
    }, 

    handleMouseOut() { 
     this.setState({showDescription: false}) 
    }, 

    renderDescription() { 
     if (this.state.showDescription) { 
      return (
       <ListItemDescription description={this.props.item.description} /> 
      ) 
     } 
    }, 

    render() { 
     return (
      <div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}> 
       List item title: {this.props.item.title} 
       {this.renderDescription} 
      </div> 
     ) 
    } 
})