如何使兩個組件在React-Redux上互相連接

Question

我使用react/redux與rails項目。因此，我希望我的列表組件成爲僞裝者（服務器端渲染），而其他組件只是在鼠標懸停在列表項上時顯示詳細信息。

鼠標懸停事件

我的問題是我怎樣才能在細節上分量列表數據當鼠標移到每個上市項目

簡單的例子

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