React中如何在className的三元表达式中使用||和&&运算符，基于两个useState状态渲染组件类名

Let's break down your problem and fix the conditional class logic.

First, let's clarify what you're trying to achieve. From your original code, you initially showed the navigation container only when pause is true (!pause ? 'hidden' : 'visible'). Now you want to add the hover state to that condition—so I assume you want the container to be visible only when both pause is true AND the user is hovering over the Player, right?

The Issue with Your Original Expression #

Your attempt ${!pause || !hover? 'hidden' : 'visible'} is logically equivalent to ${!(pause && hover) ? 'hidden' : 'visible'}, which should work on paper. But there are two likely reasons it's not behaving as expected:

1. Operator precedence ambiguity: The ternary operator has lower precedence than logical OR/AND, so wrapping the condition in parentheses makes the intent clearer and avoids unexpected behavior:

   ${(!pause || !hover) ? 'hidden' : 'visible'}
   

2. You might have the logic reversed: Maybe you actually want the container to be visible when either pause is true OR the user is hovering? If that's the case, your condition was using the wrong logical operator.

Correct Solutions Based on Your Needs #

Pick the solution that matches your intended behavior:

1. Visible ONLY when pause is true AND hover is true

This is probably what you want, since you're combining the original pause condition with hover. Use a logical AND (&&) for the condition—it's more readable than the negated OR version and directly states your intent:

<div className={`playerNavigation__container ${pause && hover ? 'visible' : 'hidden'}`}>

2. Visible when pause is true OR hover is true

If you want the container to show either when paused OR when the user hovers (even if not paused), use a logical OR (||):

<div className={`playerNavigation__container ${pause || hover ? 'visible' : 'hidden'}`}>

3. Simplified Version (If Hidden is Default)

If your CSS sets playerNavigation__container to be hidden by default, you can simplify the code by only adding the visible class when the condition is met:

<div className={`playerNavigation__container ${pause && hover ? 'visible' : ''}`}>

This keeps the template string cleaner and relies on your base styles to handle the hidden state.

Full Working Example #

Here's how your component would look with the first solution (both pause and hover required):

import { useState } from 'react';
import Buttons from './Buttons'; // Adjust import as needed
import back from './path-to-back-icon.png'; // Adjust path as needed

function Player() {
  const [pause, setPause] = useState(false);
  const [hover, setHover] = useState(false);

  return (
    <div className="Player" onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}>
      <div className={`playerNavigation__container ${pause && hover ? 'visible' : 'hidden'}`}>
        <Buttons to={'/'} className={'back'}>
          <img className="btn__back-img" src={back} alt="btn__back" />
        </Buttons>
      </div>
    </div>
  );
}

export default Player;

Quick Debug Tip #

If you're still having issues, add a console log to check the state values when hovering and toggling pause:

console.log(`Pause: ${pause}, Hover: ${hover}, Class: ${pause && hover ? 'visible' : 'hidden'}`);

This will help you verify if the condition is evaluating correctly based on the current state.

内容的提问来源于stack exchange，提问作者shivetay