メインコンテンツへスキップ

v2への移行

React-Bootstrap v2は、Bootstrap 5との完全な互換性を追加します。Bootstrap 5はプロジェクトの大幅な書き直しであるため、React-Bootstrap v1から大幅な破壊的変更があります。

最初に上流のBOOTSTRAP移行ガイドをお読みください

移行ガイドを見る

React-Bootstrapは、バニラBootstrapに存在するコンポーネントのみを含んでいます。機能がBootstrapから削除された場合、React-Bootstrapからも削除されました。このガイドは、上流の移行ガイドにある情報を繰り返すものではありません。その目的は、React-Bootstrap固有のAPIの変更点と追加点を文書化することです。

バージョニング​

react-bootstrapでBootstrap 4のサポートに依存し続けるプロジェクトが多数あるため、Bootstrap 4コンポーネントの一般的なメンテナンスを継続します。react-bootstrapパッケージのバージョンは次のようになります。

  • Bootstrap 3のサポートは、react-bootstrapのv1.0.0未満のバージョンで継続されます。
  • Bootstrap 4のサポートは、react-bootstrapのv1.0.0以上のバージョンで提供されます。
  • Bootstrap 5のサポートは、react-bootstrapのv2.0.0以上のバージョンで提供されます。

私たちは、Bootstrapのメジャーリリースと足並みを揃えて破壊的な変更を維持することを約束するものではありません。プロジェクトにとって最適なものによっては、Bootstrap 6をターゲットとするReact-Bootstrap v3が存在する可能性があります。

v1.xからの破壊的変更の概要​

以下は、破壊的なAPIの変更点の大まかな説明と、移行するための最小限の変更点です。

一般​

  • 新しいJSX変換をサポートするには、React >= 16.14.0が必要になりました。

アコーディオン​

  • アコーディオンはカードベースではなくなり、異なるマークアップで書き直されました。
  • AccordionContextの値インターフェースが変更されました。
  • AccordionToggleはAccordionButtonに名前が変更されました。
  • useAccordionToggleはuseAccordionButtonに名前が変更されました。

バッジ​

  • variantはbgに名前が変更されました。

ButtonGroup​

  • toggleを削除しました。

CardColumns​

  • CardColumnsを削除しました。

CloseButton​

  • labelプロパティを削除し、aria-labelを使用するようにしました。
  • variantプロパティを追加しました。

Col​

  • ColOrderは、最大値が12ではなく、5になりました。
  • ブレークポイントプロパティでオブジェクトを使用する場合、spanはデフォルトでtrueではなくなりました。
  • ドロップダウンの区切り線は、デフォルトでdivではなくhrを使用します。
  • 配置値のleftとrightがそれぞれstartとendに変更されました。
  • alignRightを削除しました。代わりにalign="end"を使用してください。
  • menuAlignプロパティを削除し、代わりにalignを使用するようにしました。
  • onSelectを削除しました。代わりに、親のDropdownでonSelectを使用してください。
  • alignRightを削除しました。代わりにalign="end"を使用してください。

Form​

  • inlineを削除しました。
  • bsPrefixを削除しました。

FormCheck​

  • bsCustomPrefixとcustomを削除し、代わりにbsSwitchPrefixを使用するようにしました。
  • フィードバックタイプは、isValidとisInvalidではなく、feedbackTypeで制御されるようになりました。

FormCheckInput​

  • bsCustomPrefixを削除しました。
  • isStaticを削除しました。

FormCheckLabel​

  • bsCustomPrefixを削除しました。
  • ベースクラスをform-check-inputからform-check-labelに変更しました。

FormControl​

  • selectタグをサポートするasプロパティを削除し、代わりにFormSelectを使用するようにしました。
  • customを削除しました。
  • bsCustomPrefixを削除しました。
  • range値をサポートするtypeのサポートを削除し、代わりにFormRangeを使用するようにしました。
  • カラーピッカーを追加

FormFile​

  • ファイル関連のコンポーネントをすべて削除しました。代わりに<Form.Control type="file" />を使用してください。

FormGroup​

  • bsPrefixを削除しました。.form-groupクラスはBootstrapではサポートされなくなりましたが、このコンポーネントはラベルと入力にcontrolIdを渡すのに役立ちます。間隔を処理するには、代わりにマージンユーティリティを使用してください。

FormRow​

  • 削除されました。代わりにRowを使用してください。

InputGroup​

  • InputGroupPrependとInputGroupAppendを削除しました。ボタンとInputGroupTextを直接の子として追加できるようになりました。
  • キーボードナビゲーションが削除されました。これが必要な場合は、代わりにTabsを使用してください。
  • onSelectを削除しました。代わりに、親のNavでonSelectを使用してください。

Popover​

  • PopoverContentコンポーネントの名前変更に合わせて、contentプロパティをbodyに名前変更しました。

PopoverContent​

  • クラス名に合わせてPopoverBodyに名前変更しました。

PopoverTitle​

  • クラス名に合わせてPopoverHeaderに名前変更しました。

ResponsiveEmbed​

  • Ratioに名前変更しました。
  • aspectRatioオプションが '1x1' | '4x3' | '16x9' | '21x9' に変更されました。

SafeAnchor​

  • Anchorに名前変更しました。

SplitButton​

  • menuAlignプロパティを削除し、代わりにalignを使用するようにしました。

Toast​

  • delayはデフォルトで5000ミリ秒になりました。

ToggleButton​

  • bsPrefixを追加しました。
  • idが必須になりました。これは、Bootstrapのマークアップの変更により、入力の切り替えを可能にするためです。