问题 react-redux中的ownProps是什么?


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

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

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

API文档说:

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

我仍然无法完全掌握它的作用。有人可以解释一下 ownProps 用不同的例子呢?


1380
2017-12-05 06:06


起源



答案:


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

例如在 Footer.js FilterLink用作:

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

因此将调用mapStateToProps方法 ownProps 有价值:

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

mapStateToProps 方法在Redux-wrapped组件中用于组合显式传递的属性(ownProps)由Redux商店处理的状态进入 props 被包裹的组件。

所以在您的链接示例中 FilterLink

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

该组件是活跃的(this.props.active == true)如果 filter 属性(例如SHOW_ALL)匹配 visibiltyFilter 在 state,即它当前是否被此值过滤。


9
2017-12-05 06:32



无论如何都要访问组件状态 mapStateToProps?喜欢 (state, ownProps, ownState)。如果不是..为什么不呢? - Eric Guan
@EricGuan那是不可能的,而且imho也没有打算。从组件的角度来看,道具计算在 mapStateToProps 仅取决于外部事物:组件使用中的属性(ownProps)或全球Redux state。该 mapStateToProps 只要其中一个发生变化就会被调用。内置的 state 在该方法中,组件本身可以完全处理,而不需要任何支持。 - Harald


答案:


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

例如在 Footer.js FilterLink用作:

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

因此将调用mapStateToProps方法 ownProps 有价值:

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

mapStateToProps 方法在Redux-wrapped组件中用于组合显式传递的属性(ownProps)由Redux商店处理的状态进入 props 被包裹的组件。

所以在您的链接示例中 FilterLink

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

该组件是活跃的(this.props.active == true)如果 filter 属性(例如SHOW_ALL)匹配 visibiltyFilter 在 state,即它当前是否被此值过滤。


9
2017-12-05 06:32



无论如何都要访问组件状态 mapStateToProps?喜欢 (state, ownProps, ownState)。如果不是..为什么不呢? - Eric Guan
@EricGuan那是不可能的,而且imho也没有打算。从组件的角度来看,道具计算在 mapStateToProps 仅取决于外部事物:组件使用中的属性(ownProps)或全球Redux state。该 mapStateToProps 只要其中一个发生变化就会被调用。内置的 state 在该方法中,组件本身可以完全处理,而不需要任何支持。 - Harald