reactJSでホバーしたときに親コンポーネントの背景を変更する

Reactのドキュメントによると、コンテキストは、現在のユーザーやテーマなどの真にグローバルな状態にのみ使用する必要があります。コンポーネントにコンテキストを使用すると、コンポーネントの再利用性が低下します。

更新されたコード

コンポーネントツリーは、App-> SolutionBox-> SolutionItemです。

アプリのSolutionItemのイベントに「反応」したいのですが、それらの間にSolutionBoxがあるため、SolutionBoxを介してイベントをアプリにスレッド化する必要があります。

ステップ1

OnHoverで呼び出されるSolutionItemに小道具を追加します。これは、親コンポーネントが変更に対応するために使用できる関数コールバックになります。

function SolutionsSectionBoxItem({ solutionIMG, onHover }) {
  let callOnHover = state => {
    if (_.isFunction(onHover)) {
      onHover(state);
    }
  };

  return (
    <div className="solutions-section-item-box">
      <img
        src={solutionIMG}
        alt=""
        onMouseEnter={() => {
          callOnHover(true);
        }}
        onMouseLeave={() => {
          callOnHover(false);
        }}
        className="solutions-section-item-img"
      />
    </div>
  );
}

ステップ2

BGChangedで呼び出されるSolutionBoxItemに小道具を追加します。これも、ソリューションアイテムのオンホバーが発生したときに呼び出される関数コールバックになります。この関数はmenuName文字列を受け取り、現在のメニュー名またはデフォルトのいずれかを渡します。

function SolutionsSectionBox({ onBGChanged }) {
  let callBGChanged = menuName => {
    if (_.isFunction(onBGChanged)) {
      onBGChanged(menuName);
    }
  };

  return (
    <div className="solutions-section-box-box">
      <SolutionItem
        solutionIMG={Ecommerce}
        onHover={state => {
          callBGChanged(state === true ? "Ecommerce" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={SalesMarketing}
        onHover={state => {
          callBGChanged(state === true ? "SalesMarketing" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={Analytics}
        onHover={state => {
          callBGChanged(state === true ? "Analytics" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={Middleware}
        onHover={state => {
          callBGChanged(state === true ? "Middleware" : "default");
        }}
      />
    </div>
  );
}

ステップ3

アプリコンポーネントで変更をリッスンします。ここでは、マウスがソリ​​ューションアイテムに出入りするたびに状態を設定します。ここから、背景を変更する必要があります。cssを使用して背景のURLを制御しています。これは、背景の種類ごとにcssクラスが必要になるため、難しくなります。bgImage状態値を使用して、「AppSalesMarketing」、「AppEcommerce」などの追加のcssclassNameの名前を変更できます。

    export default function App() {
  const [bgImage, setbgImage] = useState(E);

  const onBGChanged = menuName => {
    setbgImage(menuName);
  };

  return (
    <div className={`App ${bgImage === "default" ? "" : `App${bgImage}`}`}>
      <SolutionBox onBGChanged={onBGChanged} />
    </div>
  );
}

CSSで

元のAppクラスを残しますが、bgImage値に基づいて、以下のようにbgImage + Appの名前を使用して追加のクラスを追加し、更新されたbackground-image値をカスケードします。

.AppEcommerce {
  background-image: url(https://placekitten.com/600/600);
}

.AppSalesMarketing {
  background-image: url(https://placekitten.com/500/800);
}

.AppAnalytics {
  background-image: url(https://placekitten.com/800/500);
}

.AppMiddleware {
  background-image: url(https://placekitten.com/700/700);
}

エクストラ

着信する小道具が関数であるかどうかをテストするためにlodashを追加してから呼び出します。将来、誰がコンポーネントを使用するかわからないため、防御的なプログラミングを行うことをお勧めします。

let callBGChanged = menuName => {
    if (_.isFunction(onBGChanged)) {
      onBGChanged(menuName);
    }
  };