如何嵌套React組件/模塊以分離UI？

我有三個主要組件用於我正在處理的儀表板UI（我是來自Angular的React初學者）：側欄，頂部導航欄和內容容器。如何嵌套React組件/模塊以分離UI？

我會如何將這些分成三個獨立的UI組件並在其他組件中調用它們？我希望能夠做到這一點：

<Sidenav /> <!-- sidenav component from Sidenav.js --> 
<section className="content"> 
    <Topnav /> <!-- top nav component from Topnav.js --> 
    <div className="wrapper container"> 
     <!-- Content here --> 
    </div> 
</section>

而且也，你會如何使用<div className="wrapper container"></div>作爲所有內容的看法？

我正在使用ES6和React Starterify應用套件。

來源

2016-01-20 Daniely Wright

這是我會怎麼做（你會發現我的名字我的所有組件文件.jsx代替.js，不過沒關係無論哪種方式，我甚至見過的人做Component.jsx.js）：

SRC/index.html中

<html> 
    <head> 
    ... 
    </head> 
    <body> 
    <script src="js/bundle.min.js"></script> <!-- I'm assuming you're using Browserify or similar to bundle the entire app into a single file --> 
    </body> 
</html>

的src/JS/main.js

import React from 'react'; 
import {render} from 'react-dom'; 
import {Routes} from '../components'; 

render(Routes, document.body);

SRC /組件/ App.jsx

import React from 'react'; 
import Topnav from './Topnav'; 

module.exports = React.createClass({ 
    displayName: 'App', 
    propTypes: { 
    children: React.PropTypes.shape({ 
     props: React.PropTypes.object 
    }) 
    }, 
    render() { 
    return (
     <section className="content"> 
     <Topnav /> 
     <div className="wrapper container"> 
      {this.props.children} 
     </div> 
     </section> 
    ); 
    } 
});

{this.props.children}會使正在處理的當前線路的組件。

的src /組件/ Topnav.jsx

...

想起來了，你會創建Java這樣的面嚮對象語言分組的方式相同。屬於彼此的組件應該一起走。因此，舉例來說，如果我不得不寫一個Profile組件，這可能是這樣的：

-- src 
    -- components 
    -- profile 
     -- index.js // Used to export Profile 
     -- Profile.jsx // This would have the profile layout and be a parent to all other components in this folder 
     -- Address.jsx 
     -- Gravatar.jsx 
     -- ...

來源

2016-01-20 18:50:35

啊，這使得有很大的意義。謝謝！ –

如何嵌套React組件/模塊以分離UI？

回答

相關問題