React-Router - 子メソッドへのメソッドの継承

Question

「Create」というコンポーネント内にネストされたボタンは、状態の変更を引き起こしてapp.jsの状態を変更し、新しいビューをレンダリングする必要があります。

私はchangeHPageメソッドをapp.jsからCreateコンポーネントに渡すことができません。私はReact-Routerを使用していますが、普通は<App changeHPage={this.changePage}>と書いて、その子コンポーネントにメソッドを渡し、this.props.changeHpageを使って呼び出しますが、React Routerを使用しているときはこのメソッド経由では渡せません。

React Routerを使用して子コンポーネントにメソッドを渡す方法についての助けがあれば幸いです。私のコードは以下の通りです。

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

次githubの問題を参照してください。 https://github.com/reactjs/react-router/issues/1857 これが直接から取られる：あなたの場合ryanflorence通常

あなたの親ルートがレンダリングしているものを正確に知っているルート境界を越えて小道具を渡す：

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

代わりに、コンポーネントレスルートを使用して、「通常の」リアクション用のものを実行してください。

<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が独自に悪い習慣はありませんが、多くの場合、何かをするのはもう少し簡単な方法があることを表示することができます。