React-BootstrapによるTab UIの実装

8111 ワード
テキストリンク
ショッピングモールプロジェクトでは,詳細ページを実現するためにBootstrap Tab UIを用いた.

次のソースコードをコピーし、必要な場所に貼り付けます。


      <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0">Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1">Option 2</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-2">Option 2</Nav.Link>
        </Nav.Item>
      </Nav>
defaultActiveKey:デフォルトの押下ボタンに対応するeventKeyを入力
eventKey:ボタンごとに独自の機能を付与

上部に対応する構成部品がインポートされました。

import { Nav } from 'react-bootstrap'

Tab機能の作成

  • 押したボタンの状態を保存します.
  • ステータスUIを表示しない
      let [tab, setTab] = useState(0)
  ...
  ...
      <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={() => setTab(0)}>
            Active
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={() => setTab(1)}>
            Option 2
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-2" onClick={() => setTab(2)}>
            Option 2
          </Nav.Link>
        </Nav.Item>
      </Nav>
   ...
   ...
  function TabContent(props) {
    if (props.tab === 0) return <div>0</div>
    else if (props.tab === 1) return <div>1</div>
    else return <div>2</div>
  }

    成功


    • データ構造#線形キュー、円形キュー、Deque-C言語
    express nginxへの配備