如何使两个组件在React-Redux上相互连接

Question

I have use react/redux with rails project. So i want my Listing Component to be pretender(server sider render) and Other component just show the detail when mouse over on listing item.

Mouse Hover event

My Question is How can i get listing data on Detail Component when mouse over on each listing item

Simple Example

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

You have some pseudo code there, but you'll have 3 components: Listings , ListingsItem , and ListingsItemDetail . You'll have a React onMouseOver attribute on an element in your ListingsItem that will call your event handler to set state. Assuming your ListingsItemDetail component is within ListingsItem , you'll check state to see if you should show ListingsItemDetail . If ListingsItemDetail is somewhere else, then you'll either call an event handler passed in as a prop or use Redux or something to set the id for the ListingsItemDetail that should be displayed.

Edit - added a partial example:

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