Reactで条件付きでBootstrap属性をレンダリングする方法

条件付きレンダリングの基本: Reactでは、条件に応じて要素や属性をレンダリングするために、条件付きレンダリングのテクニックを使用します。以下は、条件付きレンダリングの基本的な例です。

import React from 'react';
function MyComponent({ shouldRender }) {
  return (
    <div>
      {shouldRender && <button>ボタン</button>}
    </div>
  );
}
export default MyComponent;

上記の例では、shouldRenderがtrueの場合にのみ、<button>要素がレンダリングされます。

Bootstrap属性の条件付きレンダリング: Bootstrapでは、要素に特定のクラスや属性を追加することでスタイルを適用します。条件に応じてBootstrap属性をレンダリングする方法は、条件付きレンダリングのテクニックと同様です。

以下は、条件に応じてdisabled属性を追加する例です。

import React from 'react';
function MyComponent({ isDisabled }) {
  return (
    <button className={`btn ${isDisabled ? 'disabled' : ''}`}>
      ボタン
    </button>
  );
}
export default MyComponent;

上記の例では、isDisabledがtrueの場合にdisabledクラスを追加し、ボタンを無効化します。

Bootstrap属性の条件付きスタイル: 条件に応じてBootstrapのスタイルを適用するためには、条件付きレンダリングとスタイルの変更を組み合わせることができます。以下は、条件に応じてボタンのスタイルを変更する例です。

import React from 'react';
function MyComponent({ isPrimary }) {
  return (
    <button className={`btn ${isPrimary ? 'btn-primary' : 'btn-secondary'}`}>
      ボタン
    </button>
  );
}
export default MyComponent;

上記の例では、isPrimaryがtrueの場合にはbtn-primaryクラスを追加し、ボタンをプライマリスタイルにします。それ以外の場合はbtn-secondaryクラスを追加します。

このようにして、ReactとBootstrapを組み合わせて条件付きで属性をレンダリングすることができます。必要に応じて、他のBootstrapの属性やスタイルを条件付きでレンダリングする方法も同様のテクニックで実現できます。