Question

我是React和redux的新手。在App.React.js中，我将onRouteChange作为道具传递给Post.js.在Post.js中，在redux connect中，我从store和ownprops接收状态。我认为ownprops将保存父组件传递给组件的所有道具。但是我没有在Post.js中收到onRouteChange。请帮我。我错过了什么？

App.React.js

constructor(props) {
   super(props);
   this.onNavigatorRef = this.onNavigatorRef.bind(this);
   this.onRouteChange = this.onRouteChange.bind(this);
   this.renderScene = this.renderScene.bind(this);
}

onRouteChange(route, toggleSideMenu = true) {
   this.navigator.jumpTo(routes[route]);
   if (toggleSideMenu) {
      this.props.toggleSideMenu();
   }
}

renderScene(route) {
    const { isSideMenuOpen, toggleSideMenu } = this.props;
    return (
      <View style={[styles.sceneView, route.style]}>
        <StatusBar hidden={isSideMenuOpen} />
        <Header onRouteChange={this.onRouteChange} />
        <route.Page onRouteChange={this.onRouteChange} />
      </View>
    );
  }

Post.js

export default connect(
(state, ownProps) => {
  console.log(`ownprops=${JSON.stringify(ownProps)}`); //{}
  console.log(`ownprops=${ownProps.onRouteChange}`);   //undefined
  return {
    posts: state.posts.map,
    onRouteChange: ownProps.onRouteChange,
    ...ownProps
  };
}, 
(dispatch, ownProps) => {
    console.log(`ownprops=${JSON.stringify(dispatch)}`); //{}
    console.log(`ownprops=${JSON.stringify(ownProps)}`); //{}
    console.log(`ownprops=${ownProps.onRouteChange}`); //undefined
    return {
      postsActions,
      onRouteChange: ownProps.onRouteChange,
      ...ownProps
    };
})(Posts);

Answer 1

首先，我想说通常将Child组件连接到Redux并不是一个好习惯。您应该只将高级组件连接到Redux并将道具传递给＆＃34; dumb＆＃34;组件。

关于你的问题，根据Redux docs：

[mapStateToProps（state，[ownProps]）：stateProps]（Function）：如果指定，组件将订阅Redux商店更新。每次更新时，都会调用mapStateToProps。它的结果必须是一个普通的对象*，它将被合并到组件的props
中

这意味着，你应该只在这里添加不是来自父母的道具 mapStateToProps用于从州添加您想要的aditional道具。您从父母那里收到的道具是完整的 - 除非您覆盖它们（在你的情况下，你在mapStateToProps＆amp; mapDispatchToProp中覆盖了它们，但是从父节点接收了相同的ownProps，所以它并不重要。）在您的示例中，您说您将onRouteChange传递给帖子，但它没有显示，您可能会将其传递给route.Page或某些父组件，但此处未显示。无论您在何处创建posts组件，都应该在那里添加onRouteChange。

<Posts onRouteChange={YOUR_FUNCTION_HERE} />

您可以在docs examples中看到应该如何使用ownProps

如何在redux中合并从父智能组件传递给智能组件的状态和道具？

1 个答案: