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>
);
}
}
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>
)
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.