두 구성 요소를 만드는 방법 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> 
     ) 
    } 
})