1

我正在处理的仪表板 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>

此外，您将如何将其<div className="wrapper container"></div>用作所有内容的视图？

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

4

1 回答 1

0

这就是我的做法（你会注意到我将所有组件文件命名.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/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>
    );
  }
});

{this.props.children}将渲染处理当前路由的组​​件。

src/components/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-20T18:50:35.983 回答