React-Router - Übergeben Sie die Methode an untergeordnete Komponente

Question

Ich habe eine Schaltfläche in einer Komponente namens "Create" verschachtelt, die eine Änderung im Zustand auslösen muss, die den Zustand in app.js ändert und eine neue Ansicht rendert.

Ich kann nicht scheinen, die Methode changeHPage von app.js zu der Create-Komponente zu übergeben. Ich benutze React-Router und normalerweise würde ich einfach <App changeHPage={this.changePage}> schreiben, um die Methode an ihre untergeordnete Komponente zu übergeben und sie über this.props.changeHpage aufzurufen, aber ich kann keine Requisiten über diese Methode übergeben, wenn ich React Router verwende.

Jede Hilfe zum Übergeben einer Methode an eine untergeordnete Komponente mit React Router wäre sehr willkommen. Mein Code kann unten gefunden werden.

app.js:

/* STRICT MODE: See `../../server.js` */ 
'use strict'; 

/* GLOBAL REACT REQUIRES */ 
// React.js 
const React = require('react'); 
// React-DOM for HTML rendering 
const ReactDOM = require('react-dom'); 
// React router for dynamic pathing. Has several component features that need to be required to use. 
const ReactRouter = require('react-router'); 
// 4 components pulled from ReactRouter: 
const Router = ReactRouter.Router; 
const Route = ReactRouter.Route; 
const Navigation = ReactRouter.Navigation; 
const Link = ReactRouter.Link; 
const browserHistory = ReactRouter.browserHistory; 

/* Relative paths to external components */ 
const auth = require('./helpers/auth.js'); 
const requireAuth = require('./helpers/requireauth.js'); 
const About = require('./components/about.js'); 
const Login = require('./components/login.js'); 
const Logout = require('./components/logout.js'); 
const Signup = require('./components/signup.js'); 
const Header = require('./components/header.js'); 
const Create = require('./components/create.js'); 
const NotFound = require('./components/notfound.js'); 
const Veri = require('./components/veri.js'); 


/* React App Creation */ 
const App = React.createClass({ 
    // Declares the initial state when app is loaded 
    getInitialState : function() { 
    return { 
     loggedIn: auth.loggedIn(), 
     change: true, 
     phoneNumber: {} 
    } 
    }, 

    // Updates state when login is trigger 
    updateAuth : function(loggedIn) { 
    this.setState({ 
     loggedIn: loggedIn 
    }) 
    }, 



    changeHPage: function() { 
    this.state.change = !this.state.change; 
    this.setState({ 
     change: !this.state.change 
    }); 
    console.log("changePage On HomePage Pressed"); 
    this.context.router.push('/') 
    }, 




    // Login even triggered and sent to back-end 
    componentWillMount : function() { 
    auth.onChange = this.updateAuth 
    auth.login() 
    }, 


    addNumber: function(phonenumber){ 

    this.state.phonenumber = phonenumber 
    this.setState() 

    }, 


    // Renders App and all of its children 
    render : function() { 

    <div className="Detail"> 
     {this.props.children && React.cloneElement(this.props.children, { 
      changeHPage: this.changeHPage 
     })} 
     </div> 

    var firstView; 


     {if(this.state.change) { 
     firstView = <div> 
     <div className="row"> 
     <Veri> This is a child of Veri </Veri> 
     <Header details="Hi, I'm Plantee"/> 
     <section className="col s12"> 
     <ul> 
      {this.state.loggedIn ? (
       <div> 
       <li><Link to="/logout">Log out</Link> </li> 
       <li><Link to="/create">Create Your Plantee</Link></li> 
       {/*<Create> <Veri/> </Create>*/} 
      </div> 
      ) : (
       <div> 
       <li><Link to="/login">Log In</Link></li> 
       <li><Link to="/signup">Sign up</Link></li> 
      </div> 
      )} 
      <li><Link to="/about">About</Link></li> 
     </ul> 
     {this.props.children || <p>You are {!this.state.loggedIn && 'not'} logged in.</p>} 
     </section> 
     </div> </div> 

    } else { 
     firstView= <div>'Hello'</div> 
    } 
     return React.cloneElement(
     firstView, 
     {switch: this.changeHPage} 
    ) 

    }} 

}) 





/* React router initialization */ 
var routes = (
    <Router history={browserHistory}> 
    <Route path="/" component={App} > 
    <Route path="header" component={Header} /> 
     <Route path="login" component={Login} /> 
     <Route path="logout" component={Logout} /> 
     <Route path="create" component={Create} change={App.changeHPage} /> 
     <Route path="signup" component={Signup} /> 
     <Route path="about" component={About} /> 
     <Route path="very" component={Veri} /> 
    </Route> 
    <Route path="*" component={NotFound} /> 
    </Router> 
) 

ReactDOM.render(routes, document.querySelector('#container')) 

create.js:

const React = require('react'); 
const ReactDOM = require('react-dom'); 
const auth = require('../helpers/auth') 
const Veri = require('./veri.js'); 
const App = require('../app.js'); 

const ReactRouter = require('react-router'); 
// 4 components pulled from ReactRouter: 
const Router = ReactRouter.Router; 
const Route = ReactRouter.Route; 
const Navigation = ReactRouter.Navigation; 
const Link = ReactRouter.Link; 
const browserHistory = ReactRouter.browserHistory; 


const Create = React.createClass({ 

    getInitialState: function(){ 
    return {checked: false} 
    }, 
    handleClick: function(event) { 
    event.preventDefault(); 
    this.setState({checked: !this.state.checked}) 

    let phonenumber = { 
     phonenumber: this.refs.phonenumber.value 
    } 

    }, 

    showVerification : function(event) { 
    event.preventDefault(); 

    }, 


    remove(e) { 
    e.preventDefault(); 
    console.log(this.props); 
    }, 

    render : function(){ 

    var msg; 
    {if(this.state.checked) { 
     msg = <div><Veri text={'Your verification code is '} code={'code'}/> <form className="gotIt" onSubmit={this.props.changeHpage} > 
     <input type="Submit" value="Got It" /> 
     </form> </div> 
    } 
    else { 
     msg = <Veri details={''}/> 
    }} 

    return (

     <div> 
     <h1>Create Your Plantee</h1> 

     <h2>Please Enter Your Phone Number</h2> 
     <p>You will recieve a phone call in order to verify that you are capable of raising a plantee</p> 



     <form className="telephoneNumber" onSubmit={this.handleClick}> 
     <input id="phonenumber" ref="phonenumber" type="tel" /> 
     <input type="Submit" /> 
     </form> 
     <div> {msg} </div> 

     <h3>{this.props.children}</h3> 


     </div> 
    ) 
    } 
}) 

module.exports = Create; 

Answer 1

Bitte beachten Sie die folgenden Github Ausgabe: ryanflorence

Normalerweise, wenn Sie: https://github.com/reactjs/react-router/issues/1857 diese direkt aus genommen Übergeben Requisiten über Routengrenzen Ihre Elternroute weiß genau, was es rendert:

<Route path="/inbox" component={Inbox}> 
    <Route path=":messageId" component={Message}/> 
    <IndexRoute component={InboxStats}/> 
</Route> 

const Inbox = React.createClass({ 
    render() { 
    return (
     <div> 
     {/* this is only ever `Message`, except the weird case 
      of `InboxStats` which doesn't need the prop */} 
     {React.cloneElement(this.props.children, { 
      onDelete: this.handleMessageDelete 
     })} 
     </div> 
    ) 
    } 
}) 

Verwenden Sie stattdessen eine komponentenlose Route und nur "normales" React Zeug.

<Route path="/inbox" component={Inbox}> 
    {/* no more `Message` */} 
    <Route path=":messageId"/> 
</Route> 

const Inbox = React.createClass({ 
    render() { 
    const { messageId } = this.props.params 
    return (
     <div> 
     {messageId ? (
      <Message onDelete={this.handleMessageDelete}/> 
     ) : (
      <InboxStats/> 
     )} 
     </div> 
    ) 
    } 
}) 

cloneElement ist nicht schlecht Praxis auf seinem eigenen, aber es kann oft ein Indikator dafür sein, dass es ein bisschen einfacher Weg, um etwas zu tun.