Reactでタブコンポーネントを構築する方法

提供：Dev Guides
移動先:案内、検索

序章

Webアプリを作成したことがある場合は、タブ付きのドキュメントインターフェイスを作成した可能性があります。 タブを使用すると、複雑なインターフェイスを管理可能なサブセクションに分割して、ユーザーがすばやく切り替えることができます。 タブは一般的なUIコンポーネントであり、実装方法を理解するために重要です。

この記事では、単独で、または既存のコンポーネントと一緒に使用できる、再利用可能なタブコンテナコンポーネントを作成する方法を学習します。

前提条件

このガイドを開始する前に、次のものが必要です。

このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。

ステップ1—空のプロジェクトを作成する

このステップでは、 Create ReactAppを使用して新しいプロジェクトを作成します。 次に、プロジェクトのブートストラップ時にインストールされたサンプルプロジェクトと関連ファイルを削除します。

まず、新しいプロジェクトを作成します。 ターミナルで次のスクリプトを実行し、create-react-appを使用して新しいプロジェクトをインストールします。 

npx create-react-app react-tabs-component

プロジェクトが終了したら、次のディレクトリに移動します。 

cd react-tabs-component

新しいターミナルタブまたはウィンドウで、 CreateReactApp開始スクリプトを使用してプロジェクトを開始します。 ブラウザは変更時に自動更新されるため、作業中はこのスクリプトを実行したままにします。 

npm start

これにより、ローカルで実行されているサーバーが起動します。 プロジェクトがブラウザウィンドウで開かなかった場合は、http://localhost:3000/にアクセスしてプロジェクトを開くことができます。 これをリモートサーバーから実行している場合、アドレスはhttp://your_domain:3000になります。

ブラウザには、CreateReactAppの一部として含まれているテンプレートReactアプリケーションが読み込まれます。

完全に新しいカスタムコンポーネントのセットを構築するので、空のプロジェクトを作成できるように、ボイラープレートコードをクリアすることから始める必要があります。

まず、テキストエディタでsrc/App.jsを開きます。 これは、ページに挿入されるルートコンポーネントです。 すべてのコンポーネントはここから始まります。 App.jsの詳細については、 Create ReactAppを使用してReactプロジェクトをセットアップする方法を参照してください。

次のようなファイルが表示されます。

react-tabs-component / src / App.js 

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import logo from './logo.svg';の行を削除します。 次に、returnステートメントのすべてを置き換えて、divタグのセットとh1を返します。 これにより、タブデモを表示するh1を返す有効なページが表示されます。 最終的なコードは次のようになります。

react-tabs-component / src / App.js 

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

function App() {
  return (
    <div>
      <h1>Tabs Demo</h1>
    </div>
  );
}

export default App;

テキストエディタを保存して終了します。

最後に、ロゴを削除します。 アプリケーションで使用することはありません。作業中に未使用のファイルを削除する必要があります。 長期的には混乱からあなたを救うでしょう。

ターミナルウィンドウで、次のコマンドを入力してロゴを削除します。 

rm src/logo.svg

プロジェクトが設定されたので、最初のコンポーネントを作成できます。

ステップ2—Tabsコンポーネントを作成する

このステップでは、新しいフォルダーと、各TabをレンダリングするTabsコンポーネントを作成します。

まず、srcディレクトリにcomponentsというフォルダを作成します。 

mkdir src/components

componentsフォルダー内に、Tabs.jsという名前の新しいファイルを作成します。 

nano src/components/Tabs.js

次のコードを新しいTabs.jsファイルに追加します。

react-tabs-component / src / components / Tabs.js 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tab from './Tab';

これらは、このコンポーネントを作成するために必要なインポートです。 このコンポーネントは、アクティブなタブを追跡し、タブのリストとアクティブなタブのコンテンツを表示します。

次に、状態を追跡し、Tabs.jsのimportsの下にアクティブなタブを表示するために使用される次のコードを追加します。

react-tabs-component / src / components / Tabs.js 

...

class Tabs extends Component {
  static propTypes = {
    children: PropTypes.instanceOf(Array).isRequired,
  }

  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.children[0].props.label,
    };
  }

  onClickTabItem = (tab) => {
    this.setState({ activeTab: tab });
  }

...

初期状態はアクティブなタブに追加され、作成するタブの配列の0から始まります。

onClickTabItemは、ユーザーがクリックした現在のタブにアプリの状態を更新します。

これで、レンダリング関数を同じファイルに追加できます。

react-tabs-component / src / components / Tabs.js 

...

  render() {
    const {
      onClickTabItem,
      props: {
        children,
      },
      state: {
        activeTab,
      }
    } = this;

    return (
      <div className="tabs">
        <ol className="tab-list">
          {children.map((child) => {
            const { label } = child.props;

            return (
              <Tab
                activeTab={activeTab}
                key={label}
                label={label}
                onClick={onClickTabItem}
              />
            );
          })}
        </ol>
        <div className="tab-content">
          {children.map((child) => {
            if (child.props.label !== activeTab) return undefined;
            return child.props.children;
          })}
        </div>
      </div>
    );
  }
}

export default Tabs;

このコンポーネントは、アクティブなタブを追跡し、タブのリストとアクティブなタブのコンテンツを表示します。

Tabsコンポーネントは、作成する次のコンポーネントTabを使用します。

ステップ3—Tabコンポーネントを作成する

このステップでは、個々のタブを作成するために使用するTabコンポーネントを作成します。

componentsフォルダー内にTab.jsという名前の新しいファイルを作成します。 

nano src/components/Tab.js

Tab.jsファイルに次のコードを追加します。

react-tabs-component / src / components / Tab.js 

import React, { Component } from 'react';
import PropTypes from 'prop-types';

もう一度、reactからReactをインポートし、PropTypesをインポートします。 PropTypesは、コンポーネントの小道具の型チェックを実行するために使用される特別なpropTypesプロパティです。

次に、importステートメントの下に次のコードを追加します。

react-tabs-component / src / components / Tab.js 

...
class Tab extends Component {
  static propTypes = {
    activeTab: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
  };

  onClick = () => {
    const { label, onClick } = this.props;
    onClick(label);
  }

  render() {
    const {
      onClick,
      props: {
        activeTab,
        label,
      },
    } = this;

    let className = 'tab-list-item';

    if (activeTab === label) {
      className += ' tab-list-active';
    }

    return (
      <li
        className={className}
        onClick={onClick}
      >
        {label}
      </li>
    );
  }
}

export default Tab;

このコンポーネントのPropTypesは、activeTabおよびlabelが文字列であり、必須であることを確認するために使用されます。 onClickも必要な機能に設定されています。

Tabコンポーネントはタブの名前を表示し、タブがアクティブな場合はクラスを追加します。 クリックすると、コンポーネントはハンドラーonClickを起動し、Tabsコンポーネントにどのタブをアクティブにするかを知らせます。

ステップ4—アプリをスタイルするためのCSSの追加

コンポーネントの作成に加えて、CSSを追加して、コンポーネントにタブの外観を与えます。

App.cssファイル内で、デフォルトのCSSをすべて削除し、次のコードを追加します。 

[label react-tabs-component/src/App.css] .tab-list {
  border-bottom: 1px solid #ccc;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
}

.tab-list-active {
  background-color: white;
  border: solid #ccc;
  border-width: 1px 1px 0 1px;
}

これにより、タブがインラインになり、activeタブに境界線が表示され、クリックしたときに目立つようになります。

ステップ5—App.jsを更新する

コンポーネントと関連するスタイルが配置されたので、それらを使用するようにAppコンポーネントを更新します。

まず、インポートを更新して、Tabsコンポーネントを含めます。

react-tabs-component / src / App.js 

import React from 'react';
import Tabs from "./components/Tabs";
import "./App.css";

次に、returnステートメントのコードを更新して、インポートされたTabsコンポーネントを含めます。 

...

function App() {
  return (
    <div>
      <h1>Tabs Demo</h1>
      <Tabs>
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
        <div label="Croc">
          After 'while, <em>Crocodile</em>!
        </div>
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
      </Tabs>
    </div>
  );
}

export default App;

ラベルが関連付けられたdivは、タブにコンテンツを提供します。

TabsがAppコンポーネントに追加されると、セクションを切り替えることができるタブ付きインターフェイスが機能するようになります。

このGithubリポジトリを表示して、完成したコードを確認できます。

結論

このチュートリアルでは、Reactを使用してタブコンポーネントを構築し、アプリケーションの状態を管理および更新しました。

ここから、スタイルのReactコンポーネントを使用して、さらに魅力的なUIを作成する他の方法を学ぶことができます。

また、DigitalOceanの How To Code in React.js シリーズ全体をフォローして、Reactを使用した開発の詳細を学ぶこともできます。

「https://www.finddevguides.com/index.php?title=Reactでタブコンポーネントを構築する方法&oldid=100527」から取得
Powered by MediaWiki