Javascript 如何嵌套组件/模块以分离UI？_Javascript_Reactjs_React Dom

Javascript 如何嵌套组件/模块以分离UI？

javascript reactjs

Javascript 如何嵌套组件/模块以分离UI？,javascript,reactjs,react-dom,Javascript,Reactjs,React Dom,我正在开发的仪表板UI有三个主要组件（我是React初学者，来自Angular）：侧栏、顶部导航和内容容器我将如何将它们拆分为三个独立的UI组件，并在其他组件中调用它们？我希望能够做到这一点： <Sidenav />  <section className="content"> <Topnav /> <!-- top nav component fr

我正在开发的仪表板UI有三个主要组件（我是React初学者，来自Angular）：侧栏、顶部导航和内容容器

我将如何将它们拆分为三个独立的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>

另外，您将如何使用

作为所有内容的视图

我正在使用ES6和应用程序工具包。

这就是我的做法（你会注意到我将所有组件文件命名为

.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/components/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>
    );
  }
});

...

用与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
      -- ...