react-redux 的这两个函数里的ownProps 参数是干什么用的?看了文档也没看懂

function mapStateToProps(state, ownProps)
function mapDispatchToProps(dispatch, ownProps)

阅读 5.7k
3 个回答
新手上路,请多包涵

mapStateToProps函数是将需要的state注入到与此视图数据相关的组件上,其中的参数state是redux中保存的全局状态,ownProps是组件本身自带的属性prop

Footer.js
<FilterLink filter="SHOW_ALL">
FilterLink.js
const mapStateToProps = (state,ownProps)=>{
    return {
        active:ownProps.filter === state.visibilityFilter
    }
}
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用的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题