0

我在连接我的 Layout 组件时遇到了一些困难，因为我正在传递孩子。基本上，我设置应用程序的方式是 app.js 包含提供程序、持久门、布局和 react-navigation 导航堆栈。

到目前为止我唯一没有连接的组件是我的布局，在我开始在顶部栏上实现一些导航之前，我真的不需要它。现在我希望能够将 routeName 传递给 redux，以便 Layout 知道用户在哪个路由上并可以显示适当的按钮。

我已经尝试了一些东西，但似乎没有任何效果，如果我设法让布局加载连接，即使我已经确认它在 React 上，它似乎也没有从 redux 商店获取路由-本机调试器。

app.js

export class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <Layout>
                        <AppWithNavigationState/>
                    </Layout>
                </PersistGate>
            </Provider>
        )
    }
}

Layout.js 这是我以前用过的。

    class Layout extends Component {

  render() {
      const currentRoute = this.props.route;
      console.log(this.props.route); ////// TESTING TO SEE IF ROUTES SHOWS. IT'S ALWAYS "UNDEFINED" DESPITE BEING IN THE STORE.
     headerButton = () => {
          if (currentRoute==='Main') { 
                return (<Icon onPress={() => navigate({routeName: "PostForm"})} style={styles.headericon} name="back"></Icon>);
            } else {
                return (<Icon style={styles.headericon} name="menu"></Icon>)
            }
        }

.......
export default ({children}) => (
    <Layout>
        {children}
    </Layout>
)

Layout.js Test (updated but still not receiving store data)

Layout.propTypes = {
    children: PropTypes.node,
    route: PropTypes.string,
    updateRoute: PropTypes.func
 };

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

const mapDispatchToProps = (dispatch) => {
    return {
        updateRoute: route => dispatch(postActions.updateRoute(route))
    }
}

const LayoutTest = ({children}) => (
    <Layout>
        {children}
    </Layout>
)


export default connect(mapStateToProps, mapDispatchToProps)(LayoutTest);
4

1 回答 1

0

结果我什至不需要将“孩子”传递给组件。我通过改变来渲染它

export default ({children}) => (
    <Layout>
        {children}
    </Layout>
)

到

export default connect(mapStateToProps, mapDispatchToProps)(Layout)

在做了一些测试并意识到状态实际上可以在 mapStateToProps 函数中读取，但它没有映射到布局。我之所以如此困惑，是因为我真的认为我需要像以前那样把孩子传给它。幸运的是我从来没有！

于 2018-04-16T22:49:43.363 回答