React-router-dom v.4 BrowseRouter 将函数传递给孩子

冬天

我刚刚升级到 React-Router v.4(和 redux-saga)。但是我在将函数从父容器传递到路由内的子容器时遇到问题...

家长:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';

import { fetchGalleryImages } from './business_logic/modules/gallery'

import logo from './assets/images/saga-logo.png';
import Gallery from './components/Gallery';

function mapStateToProps(state) {
    return { galleryImages: state.galleryImages };
}
function mapDispatchToProps(dispatch) {
    return { actions: bindActionCreators({ fetchGalleryImages }, dispatch) };
}

class App extends Component {
    constructor(props) {
        super(props);
        this.loadGallery = props.actions.fetchGalleryImages.bind(this);
    }

    loadGalleryHandler() {
        this.loadGallery();
    }

    render() {
        return (
            <div className="App">
                <img src={logo} className="logo" alt="logo" />
                <h1>Welcome to Redux-Saga</h1>
                <section className="content">
                    <p>This is an exersize in using react together with Redux-saga.</p>

                    <Router>
                        <div>
                            <nav className="main">
                                <NavLink activeClassName="selected" exact to="/" >Home</NavLink>
                                <NavLink activeClassName="selected" to="/gallery">Gallery</NavLink>
                            </nav>

                            <Route path="/gallery" onLoadEvent={this.loadGalleryHandler} component={Gallery} />
                        </div>
                    </Router>
                </section>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

我的子组件如下所示:

import React, { Component } from 'react';

class Gallery extends Component {

    componentDidMount() {
        this.props.onLoadEvent();
    }

    render() {
        return (
            <div className="Gallery">
                <h2>Gallery</h2>
            </div>
        );
    }
}

export default Gallery;

正如您所看到的,我试图将函数传递loadGalleryGallery组件,但是,在 dom 中,Gallery组件被包裹在一个Route组件中,组件不会将loadGallery函数发送给其子组件。

这是在 React 的 dom 中的样子:

<Route path="/gallery" onLoadEvent=loadGalleryHandler() component=Gallery()>
    <Gallery match={...somestuff...} location={...somestuff...} history={...somestuff...}>...</Gallery>
</Route>

显然onLoadEvent=loadGalleryHandler()没有传递给画廊。

我如何使它工作?

泰勒麦金尼斯

正如您所注意到的,您传递给的道具<Route>不会传递给您的组件。这是 Routerender道具的确切用例

取而代之的是,

<Route path="/gallery" onLoadEvent={this.loadGalleryHandler} component={Gallery} />

你可以这样做,然后将任何道具传递给你想要的组件,

<Route path="/gallery" render={() => (
  <Gallery {...props} onLoadEvent={this.loadGalleryHandler} />
)} />

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

尝试导入错误:“ BrowseRouter”未从“ react-router-dom”导出(导入为“ Router”)

来自分类Dev

React Router V4 (react-router-dom) 以编程方式深入树中导航

来自分类Dev

React-Router v4 - 将参数传递给 withRouter

来自分类Dev

如何将字符串作为函数传递给react-router-dom Route?

来自分类Dev

React-router-dom v4 路由以及如何在子组件内部显示

来自分类Dev

React Router (Dom) v4 在输入时重定向到不同的路由回车键

来自分类Dev

TypeError: undefined is not an object (evaluating 'this.props.location') [ReactJS + react-router-dom V4]

来自分类Dev

React Router 4:将路由道具传递给布局组件

来自分类Dev

如何使用react-intl,react-router-dom v4和TypeScript对React组件进行单元测试

来自分类Dev

通过React Router Dom将用户传递给班级

来自分类Dev

正确使用 react router v4

来自分类Dev

将react-router-dom从4升级到5

来自分类Dev

如何在 React Router v4 中向孩子发送道具?

来自分类Dev

如何使用React Router v6将参数传递给链接?

来自分类Dev

react-router-v4 上的 React.CreateElement 问题,而不是 v4-alpha4

来自分类Dev

React Router v4 将导航栏移动到单独的文件

来自分类Dev

React router v4,将未知路由重定向到主页/根页面

来自分类Dev

如何使用 React Router v4 将错误路由重定向到特定页面

来自分类常见问题

react-router(v4)如何返回?

来自分类Dev

React Router v4和MatchWithFade出现问题

来自分类Dev

如何包装React Router v4的NavLink组件?

来自分类Dev

React Router v4 不显示组件

来自分类Dev

React-Router v4 添加子路由

来自分类Dev

React Router v4:参数与 404 冲突

来自分类Dev

React Router v4 - 嵌套路由问题

来自分类Dev

React Router (v4) 未在 componentDidUpdate() 中重定向

来自分类Dev

多级静态路由架构 react router v4

来自分类Dev

React Router v4 递归返回

来自分类Dev

React Router Dom嵌套路由,或者如何传递

Related 相关文章

  1. 1

    尝试导入错误:“ BrowseRouter”未从“ react-router-dom”导出(导入为“ Router”)

  2. 2

    React Router V4 (react-router-dom) 以编程方式深入树中导航

  3. 3

    React-Router v4 - 将参数传递给 withRouter

  4. 4

    如何将字符串作为函数传递给react-router-dom Route?

  5. 5

    React-router-dom v4 路由以及如何在子组件内部显示

  6. 6

    React Router (Dom) v4 在输入时重定向到不同的路由回车键

  7. 7

    TypeError: undefined is not an object (evaluating 'this.props.location') [ReactJS + react-router-dom V4]

  8. 8

    React Router 4:将路由道具传递给布局组件

  9. 9

    如何使用react-intl,react-router-dom v4和TypeScript对React组件进行单元测试

  10. 10

    通过React Router Dom将用户传递给班级

  11. 11

    正确使用 react router v4

  12. 12

    将react-router-dom从4升级到5

  13. 13

    如何在 React Router v4 中向孩子发送道具?

  14. 14

    如何使用React Router v6将参数传递给链接?

  15. 15

    react-router-v4 上的 React.CreateElement 问题,而不是 v4-alpha4

  16. 16

    React Router v4 将导航栏移动到单独的文件

  17. 17

    React router v4,将未知路由重定向到主页/根页面

  18. 18

    如何使用 React Router v4 将错误路由重定向到特定页面

  19. 19

    react-router(v4)如何返回?

  20. 20

    React Router v4和MatchWithFade出现问题

  21. 21

    如何包装React Router v4的NavLink组件?

  22. 22

    React Router v4 不显示组件

  23. 23

    React-Router v4 添加子路由

  24. 24

    React Router v4:参数与 404 冲突

  25. 25

    React Router v4 - 嵌套路由问题

  26. 26

    React Router (v4) 未在 componentDidUpdate() 中重定向

  27. 27

    多级静态路由架构 react router v4

  28. 28

    React Router v4 递归返回

  29. 29

    React Router Dom嵌套路由,或者如何传递

热门标签

归档