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命名为.js而不是Component.jsx.js，尽管这两种方式都无关紧要.I＆＃39甚至看到人们做<html> <head> ... </head> <body> <script src="js/bundle.min.js"></script>  </body> </html>）：

<强> SRC / index.html中

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

render(Routes, document.body);

<强>的src / JS / main.js

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>
    );
  }
});

<强>的src /组件/ App.jsx

{this.props.children}

...将呈现处理当前路径的组件。

<强>的src /组件/ Topnav.jsx

Profile

以与在Java等面向对象语言中创建分组相同的方式来思考它。彼此属于的组件应该在一起。因此，例如，如果我必须编写-- 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 -- ...组件，可能看起来像：

namespace :foo do
  task :bar do
    begin
      raise 'foo'
    rescue RuntimeError => ex
      raise ex.class, 'bar', ex.backtrace
    end
  end
end

如何嵌套React组件/模块来分离UI？

1 个答案: