javascript - 如何在react.js中创建可重用的组件或部分组件？

Question

第一次使用 React.js，我想做一些非常简单的事情。

我创建了一个 app.js，它加载具有导航的初始页面并吐出子属性。

我不想将导航放在 app.js 文件中，而是想创建另一个组件或部分组件来呈现它。

代码如下:

import React, { Component } from 'react';
import NavLink from './components/NavLinks/NavLinks'
import './App.css';
import { Link } from 'react-router';

class App extends Component {
  render() {
    return (
      <div className="App">
        <nav>
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/contact" activeClassName="active">Contact</NavLink></li>
          <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink></li>
        </nav>

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

我想要什么:

class App extends Component {
  render() {
    return (
      <div className="App">

        {-- Some component or partial here to render the nav --}

        <div className='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

实现此目的的理想方法是创建无状态功能组件。由于您没有根据导航组件的状态进行更改，因此您可以将其作为轻量级无状态功能组件，只为您呈现所需的 View 。

const navRenderer = () => {
     <nav>
         <li><NavLink to="/">Home</NavLink></li>
         <li><NavLink to="/contact" activeClassName="active">Contact</NavLink</li>         
         <li><NavLink to="/bad-link" activeClassName="active">Bad Link</NavLink</li>
     </nav>
    }

export default navRenderer;

现在您可以将其导入到 App.js 文件中:

import navRenderer from 'path/to/navRenderer';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <NavRenderer />
            <div className='container'>
              {this.props.children}
            </div>
          </div>
        );
      }
    }

export default App;

您可以阅读有关 Stateless Functional Components 的更多信息在这里。