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

Question

我正在使用的儀表板UI有三個主要組件（我是來自Angular的React初學者）：側邊欄，頂部導航和內容容器。

如何將它們分為三個獨立的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應用程序套件。

Answer 1

這就是我要這樣做的方式（您會注意到我將所有組件文件都.jsx為.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
      -- ...

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

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-20 18:50:35

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

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-20 18:50:35

解決方案1
0 已采納 2016-01-20 18:50:35