慕容森
2018-08-05 10:05:40
在vue中,可以通過<router-view />實現把子組件嵌套在父組件中的任意位置,但是在react中怎樣實現呢?初學react,求指教!如下react代碼Layout.jsimport React from 'react'const Layout = () =>(
<div>
<div>header</div>
我想把子組件嵌套在這個位置
<div>footer</div>
</div>)
export default LayoutChildOne.js...省略一部分
<div>子組件 1</div>ChildTwo.js...省略一部分
<div>子組件 2</div>路由:<Router>
<Fragment>
<Route path='/' component={Layout}/>
<Route path='/one' component={ChildOne}/>
<Route path='/two' component={ChildTwo}/>
</Fragment></Router>路由這么寫,子組件只會放在Layout組件的最后面顯示。
2 回答

POPMUISE
TA貢獻1765條經驗 獲得超5個贊
import React from 'react'
const Layout = () =>(
<div>
<div>header</div>
<ChildOne />
{/*or*/}
<Route path='/two' component={ChildTwo} />
<div>footer</div>
</div>
)
export default Layout

Qyouu
TA貢獻1786條經驗 獲得超11個贊
const Layout = (props) =>(
<div>
<div>header</div>
{props.children}
<div>footer</div>
</div>
)
<Router>
<Layout>
<Route path='/one' component={ChildOne}/>
<Route path='/two' component={ChildTwo}/>
</Layout>
</Router>
添加回答
舉報
0/150
提交
取消