React-router-dom v4 BrowseRouter가 자식에게 함수를 전달합니다.

방금 React-Router v.4 (및 redux-saga)로 업그레이드했습니다. 하지만 ... 경로 내에서 아이에게 부모 컨테이너에서 기능을 지나가는 데 문제가React-router-dom v4 BrowseRouter가 자식에게 함수를 전달합니다.

부모 :

내 하위 구성 요소는 다음과 같습니다

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;

것은 당신이 볼 수 있듯이 그러나 Gallery 구성 요소에 loadGallery 함수를 전달하려고합니다. 그러나 Gallery 구성 요소는 loadGallery 함수를 해당 C로 보내지 않는 Route 구성 요소로 래핑됩니다. 힐드.

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

이 분명 onLoadEvent=loadGalleryHandler()이 갤러리에 전달되지 : 이것은의 모습입니다

는

의 DOM 반응.

어떻게 작동합니까?

출처

2017-04-13 Winter

당신이 알아챈 것처럼 <Route>에 전달한 소품은 구성 요소로 전달되지 않습니다. 이것은 Route의 render 소품의 정확한 사용 사례입니다. 대신이의

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

당신은이 작업을 수행 한 다음 원하는 구성 요소에 대한 모든 소품을 전달할 수

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

출처

2017-04-13 07:29:39

React-router-dom v4 BrowseRouter가 자식에게 함수를 전달합니다.

답변

관련 문제