mapStateToProps 和 mapDispatchToProps 中的 ownProps arg 有啥用？

Posted 2023-02-16

【中文标题】mapStateToProps 和 mapDispatchToProps 中的 ownProps arg 有啥用？

【英文标题】：What is the use of the ownProps arg in mapStateToProps and mapDispatchToProps?mapStateToProps 和 mapDispatchToProps 中的 ownProps arg 有什么用？

【发布时间】：2017-05-03 02:28:22

【问题描述】：

我看到在 Redux 中传递给 connect 函数的 mapStateToProps 和 mapDispatchToProps 函数将 ownProps 作为第二个参数。

[mapStateToProps(state, [ownProps]): stateProps] (Function):

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

可选的[ownprops] 参数是什么？

我正在寻找一个额外的例子来说明问题，因为the Redux docs 中已经有一个例子了

【问题讨论】：

你能说得更具体些吗？您链接到的文档中对该论点的解释有什么不清楚的地方？

我只是在寻找一个使用该参数的其他实际示例。

那你能edit把这个问题说清楚吗？

@jonrsharpe react-redux 文档没有说它是什么，只是它存在，被称为 ownProps 并且函数的数量决定了它是否被传递——而不是它是什么。

@deb0ch 我不知道 18 个月前它说了什么，但现在它说 “传递给连接组件的道具”。无论哪种方式，OP 已经编辑了问题并收到并接受了答案。

【参考方案1】：

如果指定了 ownProps 参数，react-redux 会将传递给组件的 props 传递到您的 connect 函数中。所以，如果你使用这样的连接组件：

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

mapStateToProps 和 mapDispatchToProps 函数中的 ownProps 将是一个对象：

 value: 'example' 

你可以使用这个对象来决定从这些函数中返回什么。

---

例如，在博客文章组件上：

// BlogPost.js
export default function BlogPost (props) 
  return <div>
    <h2>props.title</h2>
    <p>props.content</p>
    <button onClick=props.editBlogPost>Edit</button>
  </div>

您可以返回对该特定帖子执行某些操作的 Redux 操作创建者：

// BlogPostContainer.js
import  bindActionCreators  from 'redux'
import  connect  from 'react-redux'
import BlogPost from './BlogPost.js'
import * as actions from './actions.js'

const mapStateToProps = (state, props) =>
  // Get blog post data from the store for this blog post ID.
  getBlogPostData(state, props.id)

const mapDispatchToProps = (dispatch, props) => bindActionCreators(
  // Pass the blog post ID to the action creator automatically, so
  // the wrapped blog post component can simply call `props.editBlogPost()`:
  editBlogPost: () => actions.editBlogPost(props.id)
, dispatch)

const BlogPostContainer = connect(mapStateToProps, mapDispatchToProps)(BlogPost)
export default BlogPostContainer

现在你可以像这样使用这个组件：

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id=1 />

【讨论】：

注意 - defaultProps 不包含在 ownProps 中

我不明白。你能解释一下默认道具吗

@Ali - 在此答案的示例中，如果 BlogPost 组件具有默认属性（使用 BlogPost.defaultProps= 或默认参数值语法），则这些值将不成为ownProps 对象的一部分。只有明确提供的属性可用。这是因为 React 会在后期填充默认值，而 connect() 代码在此之前运行。

@goto-bus-stop 我明白了。谢谢！

【参考方案2】：

ownProps 指的是由 parent 传下来的 props。

所以，例如：

Parent.jsx：

...
<Child prop1=someValue />
...

Child.jsx：

class Child extends Component 
  props: 
    prop1: string,
    prop2: string,
  ;
...


const mapStateToProps = (state, ownProps) => 
  const prop1 = ownProps.prop1;
  const tmp = state.apiData[prop1]; // some process on the value of prop1
  return 
    prop2: tmp
  ;
;

【参考方案3】：

goto-bus-stop 的回答很好，但要记住的一件事是，根据 redux 的作者 Abramov/gaearon 的说法，在这些函数中使用 ownProps 会使它们变慢，因为它们必须在道具更改时重新绑定动作创建者.

在此链接中查看他的评论： https://github.com/reduxjs/redux-devtools/issues/250