Question

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

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

我已经尝试了一些东西，但似乎没有任何作用，如果我设法通过连接加载布局，它似乎没有从redux存储获取路由，即使我已经确认它是在React-Native Debugger上。

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

Answer 1

原来我甚至不需要通过“孩子们”。到组件。我通过改变

来渲染它

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

到

export default connect(mapStateToProps, mapDispatchToProps)(Layout)

在做了一些测试并意识到状态实际上能够在mapStateToProps函数内部读取但是它没有映射到Layout。我之所以如此困惑的原因是我真的以为我需要像以前那样把孩子传给它。幸运的是我永远不会！

使用Redux connect（）与布局组件传递子和接收道具

1 个答案: