React.jsとStyled Componentsで別のStyledコンポーネントをHover時にターゲットする方法

2024-04-16

React.js と Styled Components を使用して、別の Styled コンポーネントがホバされた時にスタイルを適用したい場合があります。これは、関連する要素間のインタラクションを示したり、ユーザーフィードバックを提供したりするために役立ちます。

2 つの主要な方法

この問題を解決するには、主に2つの方法があります。

ネストされたセレクターを使用する

最初の方法は、ネストされたセレクターを使用して、親コンポーネントのホバー状態に基づいて子コンポーネントにスタイルを適用することです。

const Parent = styled.div`
  &:hover {
    & > Child {
      /* 子コンポーネントのスタイル */
      color: red;
    }
  }
`;

const Child = styled.span`
  /* デフォルトのスタイル */
  color: blue;
`;

この例では、Parent コンポーネントがホバされると、Child コンポーネントの色が赤に変更されます。

コンポーネント間の参照を使用する

2 つ目の方法は、useRef フックと forwardRef プロパティを使用して、コンポーネント間で参照を渡すことです。

const Parent = React.forwardRef((props, ref) => {
  const childRef = useRef();

  const handleHover = () => {
    if (childRef.current) {
      childRef.current.style.color = 'red';
    }
  };

  return (
    <div ref={ref} onMouseEnter={handleHover} onMouseLeave={() => childRef.current.style.color = 'blue'}>
      {/* 子コンポーネント */}
      <Child ref={childRef} />
    </div>
  );
});

const Child = React.forwardRef((props, ref) => {
  return <span ref={ref}>/* デフォルトのスタイル */</span>;
});

どちらの方法を選択するかは、状況によって異なります。ネストされたセレクターは、構造が単純な場合に適しています。一方、コンポーネント間の参照は、より複雑な構造や動的なスタイル変更が必要な場合に適しています。

その他の考慮事項

アクセシビリティ: キーボードやスクリーンリーダーを使用するユーザーも考慮する必要があります。
パフォーマンス: ネストされたセレクターは、コンポーネントツリーが深くなるにつれてパフォーマンスに影響を与える可能性があります。
コードの保守性: コードが読みやすく、将来変更しやすいようにすることが重要です。

React.jsとStyled Componentsで別のStyledコンポーネントをHover時にターゲットするサンプルコード

ネストされたセレクターを使用する

const Parent = styled.div`
  &:hover {
    & > Child {
      color: red;
    }
  }
`;

const Child = styled.span`
  color: blue;
`;

説明:

Parent コンポーネントは &:hover 擬似クラスを使用して、ホバー状態を検知します。
ホバー状態になると、& > Child セレクターを使用して、Child コンポーネントを選択します。
Child コンポーネントの色は赤に変更されます。

コンポーネント間の参照を使用する

const Parent = React.forwardRef((props, ref) => {
  const childRef = useRef();

  const handleHover = () => {
    if (childRef.current) {
      childRef.current.style.color = 'red';
    }
  };

  return (
    <div ref={ref} onMouseEnter={handleHover} onMouseLeave={() => childRef.current.style.color = 'blue'}>
      {/* 子コンポーネント */}
      <Child ref={childRef} />
    </div>
  );
});

const Child = React.forwardRef((props, ref) => {
  return <span ref={ref}>デフォルトのスタイル</span>;
});

Parent コンポーネントは React.forwardRef を使用して、コンポーネント参照を ref プロパティに伝えます。
useRef フックを使用して、childRef という変数に Child コンポーネントへの参照を格納します。
onMouseEnter イベントハンドラーは、childRef.current のスタイルを赤に変更します。
Child コンポーネントは、ref プロパティを使用して childRef に自身を参照します。

補足

これらの例は基本的なものです。実際のアプリケーションでは、より複雑なスタイルやロジックが必要になる場合があります。
アクセシビリティ、パフォーマンス、コードの保守性を考慮することが重要です。

React.jsとStyled Componentsで別のStyledコンポーネントをHover時にターゲットする方法：その他の方法

カスタムフックを使用して、ホバー状態を管理し、スタイルを適用するという方法があります。

const useHover = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => setIsHovered(true);
  const handleMouseLeave = () => setIsHovered(false);

  return { isHovered, handleMouseEnter, handleMouseLeave };
};

const Parent = () => {
  const { isHovered, handleMouseEnter, handleMouseLeave } = useHover();

  return (
    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      <Child isHovered={isHovered} />
    </div>
  );
};

const Child = ({ isHovered }) => {
  const styles = styled.div`
    color: ${isHovered ? 'red' : 'blue'};
  `;

  return <div css={styles}>子コンポーネント</div>;
};

useHover カスタムフックは、isHovered ステートと、handleMouseEnter および handleMouseLeave イベントハンドラーを公開します。
Parent コンポーネントは useHover フックを使用し、isHovered ステートとイベントハンドラーを取得します。
onMouseEnter と onMouseLeave イベントを使用して、isHovered ステートを更新します。
Child コンポーネントは isHovered プロップを受け取り、スタイルを動的に変更します。

Context APIを使用して、ホバー状態をコンポーネントツリー全体に共有するという方法もあります。

const HoverContext = createContext({ isHovered: false });

const Provider = HoverContext.Provider;
const Consumer = HoverContext.Consumer;

const Parent = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Provider value={{ isHovered, setIsHovered }}>
      <div>
        <Child />
      </div>
    </Provider>
  );
};

const Child = () => {
  const { isHovered, setIsHovered } = useContext(HoverContext);

  const styles = styled.div`
    color: ${isHovered ? 'red' : 'blue'};
  `;

  return <div css={styles}>子コンポーネント</div>;
};