如何在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

理想的方法是制作無狀態功能組件。 由於您不是基於導航組件的狀態進行更改，因此可以將其作為重量輕的無狀態功能組件，僅為您呈現所需的視圖。

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;

您可以在此處閱讀有關無狀態功能組件的更多信息。

Answer 2

像這樣寫：

首先創建一個單獨的組件，該組件僅包含應用程序的Navigation部分，如下所示：

class Nav extends Component {
  render() {
    return (
       <div>
          <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>
    );
  }
}

export default Nav;

然后將此導航文件導入到您的App組件中，並直接在render內部進行render如下所示：

import Nav from './nav'; // import here change the path according to your folder structure 

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

        <Nav/>

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

      </div>
    );
  }
}

export default App;

Answer 3

您可以將另一個組件創建為NavLinks並且由於它沒有任何狀態，因此可以將其創建為無狀態組件，然后將其導入到App例如

const NavLinks= () => {
         <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 NavLinks;

App.js

import NavLinks form 'path/to/NavLinks';
class App extends Component {
  render() {
    return (
      <div className="App">

        <NavLinks/>

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

export default App;