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

2021-10-202022-09-04

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

準備

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

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

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

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

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

https://react-bootstrap.github.io/components/close-button/

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

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

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

import React from 'react';
import { CloseButton as BootstrapCloseButton } from 'react-bootstrap';

function CloseButton(props) {
  const {
    ...otherProps
  } = props;

  return (
    <BootstrapCloseButton {...otherProps} />
  )
}

export default CloseButton;

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

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

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

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

import './App.css';
import CloseButton from './components/CloseButton';

function App() {
  return (
    <div className="m-5">
      <CloseButton />
    </div >
  );
}

export default App;

画面を確認してみます。

はい、できました。