渡す小道具

Question

ルータv2.5.1

に反応はv15.1.0

ルート設定反応させ：

<Router history={hashHistory}> 
    <Route path="auth" component={AuthLayout}> 
    <Route path="login" components={{main:LoginForm, footer: LoginFooter}} /> 
    <Route path="register" components={{main:RegisterForm, footer: RegisterFooter}} /> 
    </Route> 
</Router> 

AuthLayoutコンポーネント

class AuthLayout extends React.Component { 
    render() { 
     const { main, footer} = this.props; 
     return (
      <div> 
       <div> 
        <div className="content clearfix"> 
         {main} 
        </div> 
       </div> 
       {footer} 
      </div> 
     ); 
    } 
} 

export default AuthLayout; 

質問 - React RouterのAuthLayoutコンポーネントに小道具を渡すにはどうすればよいですか？コンポーネント、すなわち、{メイン}のコンポーネントに依存する、異なる小道具が渡されるべきである。

私はこれに近づいているので、私はかなり反応しますので、間違ってアドバイスしてください。 私はこのトピックを研究しましたが、ソリューションの多くは古いようで、複数のコンポーネントを読み込むことはできませんでした。

Answer 1

私はJsFiddle that demonstrates passing props to the AuthLayout componentと書いています。それは、リアクタの代わりにNavigation routerを使用していますが、あなたはそれを公開していることを願っています。 AuthLayoutにタイトルの小道具を渡しているのが分かります。メインの内容に応じて、タイトルを「ログイン」または「登録」に設定しました。ナビゲーションルーターはコンポーネントをレンダリングしないので、必要な小道具を渡すことができます。

var {StateNavigator} = Navigation; 
var {NavigationLink} = NavigationReact; 

var AuthLayout = ({title, stateNavigator}) => (
    <div> 
    <h1>{title}</h1> 
    <div id="content"></div> 
    <div id="footer"></div> 
    </div> 
) 

var Login = ({stateNavigator}) => (
    <NavigationLink 
    stateKey="register" 
    stateNavigator={stateNavigator}> 
    Register 
    </NavigationLink> 
) 

var Register = ({stateNavigator}) => (
    <NavigationLink 
    stateKey="login" 
    stateNavigator={stateNavigator}> 
    Login 
    </NavigationLink> 
) 

var LoginFooter =() => <div>Login Footer</div> 
var RegisterFooter =() => <div>Register Footer</div> 

var stateNavigator = new StateNavigator([ 
    {key: 'login', route: ''}, 
    {key: 'register', route: 'register'} 
]); 

stateNavigator.states.login.navigated =() => { 
    ReactDOM.render(<AuthLayout title="Login" />, 
    document.getElementById('container')); 
    ReactDOM.render(<Login stateNavigator={stateNavigator} />, 
    document.getElementById('content')); 
    ReactDOM.render(<LoginFooter />, 
    document.getElementById('footer')); 
} 

stateNavigator.states.register.navigated =() => { 
    ReactDOM.render(<AuthLayout title="Register" />, 
    document.getElementById('container')); 
    ReactDOM.render(<Register stateNavigator={stateNavigator} />, 
    document.getElementById('content')); 
    ReactDOM.render(<RegisterFooter />, 
    document.getElementById('footer')); 
} 

stateNavigator.start(); 

Answer 2

ちょっと@markyph私が見えるようにAuthLayoutと一緒に行く好む：フッターと認証レイアウトは基本的に "コンテナ" であると

const AuthLayout = props => <div> <div> <div className="content clearfix"> {props.children} </div> </div> <Footer/> </div>

。 withRouter(Component)をv3.0.0-alpha.1で使用して、どこでも反応ルータから小道具にアクセスできます。これは、コンポーネントにprops.paramsと場所を提供します。

これは、すべてのレベルで小道具を渡さなければならないよりはるかに良いです。

この機能は、まもなくうまくメインブランチに入ります。

私のようなものがあるだろうな選択肢ではないthatsの場合：メソッドのいずれかにHow to pass props to {this.props.children}

う：あなたは答えはここに示されている何かを行うことができますprops.childrenするルータの小道具を渡すために

const AuthLayout = props => 
     <div> 
      <div> 
       <div className="content clearfix"> 
        {props.children} 
       </div> 
      </div> 
      <Footer {...props}/> 
     </div> 

をあなたのルータの設定では、次のものがあります。

<Route path={'/auth'} component={AuthLayout}> 
    <Route path={'forgot'} component={Forgot}/> 
    <Route path={'login'} component={Login}/> 
</Route>