mapStateToProps和mapDispatchToProps中ownProps arg的用途是什么?


95

我看到在Redux 中传递给函数的mapStateToPropsand mapDispatchToProps函数作为第二个参数。connectownProps

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

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

可选[ownprops]参数是什么?

我正在寻找一个其他示例来使事情变得清晰,因为Redux文档中已经有一个


你可以再详细一点吗; 您链接到的文档中对该参数的解释尚不清楚吗?
jonrsharpe

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

1
然后,您可以编辑问题以使其清楚吗?
jonrsharpe

1
@jonrsharpe react-redux文档没有说它是什么,仅仅是它的存在而被称为ownProps,并且该函数的确定性决定了它是否被传递-而不是它是什么。
deb0ch

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

Answers:


110

如果ownProps指定了参数,则react-redux会将传递给组件的props传递给connect函数。因此,如果您使用这样的连接组件:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

ownProps您的内部mapStateToPropsmapDispatchToProps功能将是一个对象:

{ 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} />

11
注意-ownProps中不包含defaultProps
Mark Swardstrom

13

ownProps是指由父代传递的道具。

因此,例如:

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
  };
};

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.