function mapStateToProps(state, ownProps)
function mapDispatchToProps(dispatch, ownProps)
function mapStateToProps(state, ownProps)
function mapDispatchToProps(dispatch, ownProps)
class Box extends Component {
}
Box = connect(mapStateToProps)(Box);
<Box foo="bar" />
ownProps
就是这里传给被 connect
修饰后的 Box 的 props.
components/Footer.js
import React from 'react'
import FilterLink from '../containers/FilterLink'
const Footer = () => (
<p>
Show:
{' '}
<FilterLink filter="SHOW_ALL">
All
</FilterLink>
{', '}
<FilterLink filter="SHOW_ACTIVE">
Active
</FilterLink>
{', '}
<FilterLink filter="SHOW_COMPLETED">
Completed
</FilterLink>
</p>
)
export default Footer
containers/FilterLink.js
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)
export default FilterLink
看到了components/Footer.js里filter属性了没有,ownProps.filter就是这里来的,ownProps作为第二个参数传递给连接组件的props用的
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
mapStateToProps函数是将需要的state注入到与此视图数据相关的组件上,其中的参数state是redux中保存的全局状态,ownProps是组件本身自带的属性prop