首页 文章

react-redux中的ownProps是什么？

提问于
浏览 次
11

我正在阅读API on react-redux并查看Redux的一个github示例：Redux todo app

其中一个容器 FilterLink 有 mapDispatchToProps （和 mapStateToProps ）接受两个参数，其中一个是ownprops .

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

API文档说：

“如果你的mapStateToProps函数被声明为带两个参数，它将以store状态作为第一个参数调用，props将作为第二个参数传递给连接组件，并且每当连接组件接收到新参数时也会重新调用它由浅等式比较确定的道具 . （第二个参数通常按惯例称为ownProps . ）“

我仍然无法完全掌握它的作用 . 有人可以用不同的例子来解释 ownProps 的作用吗？

reactjs redux react-redux

1 回答

  • 10

    ownProps 是使用组件时传递的属性 . 在简单的React中，这些将被称为道具 .

    例如，在Footer.js中，FilterLink用作：

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

    因此，将使用 ownProps 调用mapStateToProps方法，其值为：

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

    mapStateToProps 方法用于Redux包装组件，以将显式传递的属性（ ownProps ）与Redux存储处理的状态组合到包装组件的 props 中 .

    所以在您链接的 FilterLink 示例中

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

    如果 filter 属性（例如SHOW_ALL）与 state 中的 visibiltyFilter 匹配，则该组件处于活动状态（ this.props.active == true ），即如果它当前被此值过滤 .

    回复于

相关问题