Question

我有一个反应原生应用程序，我试图将道具传递给我的AppwithNavigationComponent。我想这样做，以便在Authenticator组件中创建的props传递到AppwithNavigationState组件。但是我坚持将多个变量传递给组件：

---- index.js -----

render() {


        return (

          <ApolloProvider store={store} client={client}>
          <Authenticator hideDefault={true} onStateChange={this.handleAuthStateChange}
          theme={Object.assign(AmplifyTheme, styles)}>
          <AppWithNavigationState { ...this.props }/> // passing in props
          </Authenticator>
          </ApolloProvider>

        )
    }

}
export default App = codePush(App);

--- AppNavigator.js ------

const AppWithNavigationState = (props,{ dispatch, nav }) => { // trying to pass in props from parent component, get following error when I do so
  console.log(props);
 return (

  <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} screenProps={{ ...props }} />
)};


AppWithNavigationState.propTypes = {
  dispatch: PropTypes.func.isRequired,
  nav: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
  nav: state.nav,
});

export default connect(mapStateToProps)(AppWithNavigationState);

^^当我尝试将父道具传递到此组件时，就好像忽略了调度和导航组件一样。我不按照我应该的方式传递道具吗？有没有办法传递多个道具？如果我传入父道具，则会收到以下错误消息：

Unhandled JS Exception: TypeError: Cannot read property 'index' of undefined

    This error is located at:
        in Transitioner (at CardStackTransitioner.js:60)
        in CardStackTransitioner (at StackNavigator.js:48)
        in Unknown (at createNavigator.js:36)
        in Navigator (at createNavigationContainer.js:198)

但是，如果我不尝试添加父道具，那么一切正常。

Answer 1

我认为你只需要改变：

const AppWithNavigationState = (props,{ dispatch, nav }) =>

为：

const AppWithNavigationState = ({ dispatch, nav }) =>

默认情况下，功能组件只有一个参数props对象。如果传入的道具在dispatch对象上包含nav和props，则上述解构语法会立即为您提供dispatch和nav个变量。

有关功能组件的示例，请参阅docs。

React native：将多个父道具传递给子组件

1 个答案: