react-redux 中的 ownProps 是什么? [英] What is ownProps in react-redux?

问题描述

我正在阅读关于 react-redux 的 API 并查看 Redux 的 github 示例之一:Redux todo 应用

I am reading the API on react-redux and looking at one of Redux' github examples: Redux todo app

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

One of the containers, FilterLink, has mapDispatchToProps (and mapStateToProps) to accept two arguments, one of them being ownprops.

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

API 文档说:

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

"If your mapStateToProps function is declared as taking two parameters, it will be called with the store state as the first parameter and the props passed to the connected component as the second parameter, and will also be re-invoked whenever the connected component receives new props as determined by shallow equality comparisons. (The second parameter is normally referred to as ownProps by convention.)"

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

I still can't fully grasp what it does. Can someone explain what ownProps does with a different example?

推荐答案

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

ownProps are the attributes that are passed when the component is used. In plain React these would be just called props.

例如在 Footer.js FilterLink 用作:

for example in Footer.js the FilterLink is used as:

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

因此 mapStateToProps 方法将使用具有值的 ownProps 调用:

So mapStateToProps method would be called with ownProps having the value:

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

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

The mapStateToProps method is used in a Redux-wrapped component to combine the explicitly passed properties (ownProps) with the state handled by the Redux store into the props of the wrapped component.

所以在您的 FilterLink

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

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

the component is active (this.props.active == true) if the filter attribute (e.g. SHOW_ALL) matches the visibiltyFilter in state, i.e. if it is currently filtered by this value.

这篇关于react-redux 中的 ownProps 是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！