react-redux 中的 ownProps 是什么?

IT技术 reactjs redux react-redux
2021-05-24 03:11:51

我正在阅读react-redux 上API并查看 Redux 的 github 示例之一:Redux todo app

其中一个容器 ,FilterLink具有mapDispatchToProps(和mapStateToProps) 接受两个参数,其中之一是ownprops

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => {
    dispatch(setVisibilityFilter(ownProps.filter))
  }
})

API 文档说:

“如果你的 mapStateToProps 函数被声明为带两个参数,它会以 store state 作为第一个参数被调用,传递给连接组件的 props 作为第二个参数,并且也会在连接组件接收到新的参数时重新调用props 由浅层相等比较确定。(第二个参数通常被称为 ownProps 按照惯例。)”

我仍然无法完全理解它的作用。有人ownProps可以用不同的例子解释什么吗?

1个回答

ownProps是使用组件时传递的属性。在简单的 React 中,这些将被称为props。

例如在Footer.js 中,FilterLink 用作:

<FilterLink filter="SHOW_ALL">
  All
</FilterLink>

所以 mapStateToProps 方法将被调用并ownProps具有以下值:

{
  "filter": "SHOW_ALL",
  "children": ...
}

mapStateToProps方法用于 Redux 包装组件中,将显式传递的属性 ( ownProps) 与 Redux 存储处理的状态组合到props包装组件的 中。

所以在你的链接示例中 FilterLink

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})

this.props.active == true如果filter属性(例如 SHOW_ALL)与visibiltyFilterin匹配state,即如果它当前被此值过滤,则组件处于活动状态 ( )