[React Bootstrap] Navs を表示してみる | 心を無にして始める React

2022-04-04

今回は、Nav コンポーネントを表示します。

準備

まだ components フォルダがなければ作ります。

src を右クリックして New Folder 。

components と入力してフォルダを作ります。

今回は、components フォルダに Nav のコンポーネントを作って、表示してみます。

公式のドキュメントはここ。

https://react-bootstrap.netlify.app/components/navs/

Nav コンポーネントをつくる

component フォルダに Nav.js を作ります。

Nav.js を心を無にして編集してみます。

import React from 'react';
import { Nav as BootstrapNav } from 'react-bootstrap';
import NavLink from './NavLink';

function Nav(props) {
  const {
    children,
    ...otherProps
  } = props;

  return (
    <BootstrapNav {...otherProps}>
      {children}
    </BootstrapNav>
  );
}

export default Object.assign(Nav, {
  Link: NavLink,
});

NavItem.js も続けて作ります。

import React from 'react';
import { Nav as BootstrapNav } from 'react-bootstrap';

function NavLink(props) {
  const {
    children,
    ...otherProps
  } = props;

  return (
    <BootstrapNav.Link {...otherProps}>
      {children}
    </BootstrapNav.Link>
  );
}

export default NavLink;

プロジェクトでは、コンポーネントを統一したデザインで利用することが多いです。

そのため、（React Bootstrap のコンポーネントをその場その場でカスタマイズしながら使うよりも、）プロジェクトでコンポーネントにしたものを使うほうが、変更をお手軽に漏れなくできることが多いです。

Nav コンポーネントを表示する

それでは、 App.js を編集して Nav コンポーネントを表示します。

import React from 'react';
import './App.css';
import Nav from './components/Nav';

function App() {
  return (
    <div className="p-5 bg-info">
      <div className="d-flex">
        <Nav defaultActiveKey="/home" className="flex-column bg-light rounded">
          <Nav.Link href="/home">Active</Nav.Link>
          <Nav.Link eventKey="link-1">Link</Nav.Link>
          <Nav.Link eventKey="link-2">Link</Nav.Link>
          <Nav.Link eventKey="disabled" disabled>
            Disabled
          </Nav.Link>
        </Nav>
      </div>
    </div >
  );
}

export default App;

画面を確認してみます。

はい、できました。