假设我有一个名为<LikePanel>
的小型可重用组件,它将在不同类型的父组件(如<BlogEntry>
、<ItemEntry>
或<ReplyEntry>
)的多个页面上使用。
import {connect} from 'react-redux'
import {likeAction} from './LikeAction'
class LikePanel extends React.Component{
render() {
return <ButtonGroup className={this.props.className}>
<Button onClick={()=>this.onClickLiking()}>
<Glyphicon glyph="thumbs-up"/>{this.props.like}</Button>
</ButtonGroup>
}
onClickLiking(type){
this.props.dispatch(likeAction());
}
}
const mapStateToProps = state => {
let obj = {};
obj[LIKE] = state[LIKE];
return obj;
}
export default connect(mapStateToProps)(LikePanel)
LikePanel
:的示例用例
class BlogEntry extends React.Component{
render(){
return this.props.data.entry.map((item)=>{
return <div>
{item.article}
<LikePanel like={item.like}/>
</div>
}
}
}
class ProductEntry extends React.Component{
render(){
return this.props.data.entry.map((item)=>{
return <div>
<ProductPanel data={item}/>
<LikePanel like={item.like}/>
</div>
}
}
}
因此,如果一个网页有20个博客条目,那么页面上就会有20个连接的<LikePanel>
,并且将来可能会有额外的组件连接到redux。将connect()
与<LikePanel>
这样的小组件一起使用是一种好的做法吗?
这绝对不错。在组件层次结构中任何有意义的地方使用connect
。一种常见的模式是连接一个列表组件,并使用mapState
检索列表中数据项的ID,为每个项呈现一些<ListItem id={itemId} />
子组件,还连接每个子组件,并按ID查找其自己的数据。另请参阅https://redux.js.org/faq/react-redux#should-i-only-connect-my-top-component或can-i-connect-multiple-components-in-my-tree。