Question

我正在阅读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的作用吗？

Answer 1

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

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

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

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

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

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

所以在FilterLink

的链接示例中

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

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