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

2021-10-192022-09-02

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

準備

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

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

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

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

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

https://react-bootstrap.github.io/components/carousel/

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

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

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

import React from 'react';
import { Carousel as BootstrapCarousel } from 'react-bootstrap';

/** @param {{ items: { children?: React.ReactNode, imgSrc?: string, imgAlt?: string }[] }} props */
function Carousel(props) {
  const {
    items,
    ...otherProps
  } = props;

  return (
    <BootstrapCarousel {...otherProps}>
      {
        items.map(item => {
          return (
            <BootstrapCarousel.Item>
              {
                item.imgSrc && (
                  <img
                    className="d-block w-100"
                    src={item.imgSrc}
                    alt={item.imgAlt || ''}
                  />
                )
              }
              {
                item.children && (
                  <BootstrapCarousel.Caption>
                    {item.children}
                  </BootstrapCarousel.Caption>
                )
              }
            </BootstrapCarousel.Item>
          );
        })
      }
    </BootstrapCarousel>
  )
}

export default Carousel;

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

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

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

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

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

function App() {

  const carouselItems = [
    {
      children: (
        <>
          <h3>１枚目</h3>
          <p>これは１枚目の説明です</p>
        </>
      ),
      imgSrc: "http://placehold.jp/373940/fafafa/800x400.jpg",
      imgAlt: '画像の説明'
    },
    {
      children: (
        <>
          <h3>２枚目</h3>
          <p>これは２枚目の説明です</p>
        </>
      ),
      imgSrc: "http://placehold.jp/282c34/fafafa/800x400.jpg",
      imgAlt: '画像の説明'
    },
    {
      children: (
        <>
          <h3>３枚目</h3>
          <p>これは３枚目の説明です</p>
        </>
      ),
      imgSrc: "http://placehold.jp/20232a/fafafa/800x400.jpg",
      imgAlt: '画像の説明'
    },
  ];

  return (
    <div className="m-5">
      <Carousel items={carouselItems} />
    </div >
  );
}

export default App;

画面を確認してみます。

はい、できました。