![](/img/trans.png)
[英]How to properly connect a ReactJS component to Redux using react-redux?
[英]How to make two Component connect each other on React-Redux
我在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>
);
}
}
那里有一些伪代码,但是有3个组件: Listings
, ListingsItem
和ListingsItemDetail
。 您将在ListingsItem
中的元素上具有React onMouseOver
属性,该属性将调用事件处理程序以设置状态。 假设您的ListingsItemDetail
组件位于ListingsItem
内,您将检查状态以查看是否应显示ListingsItemDetail
。 如果ListingsItemDetail
在其他地方,那么您将调用作为prop传入的事件处理程序,或者使用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>
)
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.