web-dev-qa-db-ja.com

Reactルーターで複数のコンポーネントをレンダリングする

私は、複数のイールドエリア、つまりコンテンツエリアとトップバータイトルのあるアプリケーションレイアウトに慣れています。 Reactルーターで同様のことを達成したいと思います。たとえば：

<Router>
  <Route path="/" component = { AppLayout }>
    <Route path="list"
           component = { ListView }
           topBarComponent = { ListTopBar }/>
  </Route>
</Router>

AppLayout：

<div className="appLayout box">
  <div className="appLayout topBar">
    { -- display ListTopBar here -- }
  </div>
  <div className="appLayout content">
    { -- display ListView here -- }
  </div>     
</div>

両方の子コンポーネントは同じ小道具を受け取る必要があります。

どうすればこれにアプローチできますか？

javascriptmeteorreactjsreact-routerreact-jsx
9
Hubert OG

複数のコンポーネントを渡すには、次のようにします。

<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>

ここのドキュメントを参照してください： https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#named-components

10
Crema

V4では、 docs に従って、次のように複数のコンポーネントをレンダリングできます。

<Route path='/some-path' render={props =>
  <div>
    <FirstChild />
    <SecondChild />
  </div>
} />
2
Fellow Stranger

複数のコンポーネントをレンダリングするには、次のようにします。

<Route 
    path="/EditEmployee/:id"  
    render={(props) => 
        <div>
            <NavMenu />
            <EditEmployee {...props} />
        </div> 
    } 
/>

ここでは、特定のコンポーネントにパラメーターを渡しています。

0
Rao

別のメソッドはrenderメソッド内にあり、複数の渡されたコンポーネントはreact.createElementを使用して作成できます。

<Route render ={(props)=>React.createElement(Component1, {...props}},
                     React.createElement(Component2, {...props}}/>
0
Snivio