ReactJS中实现上下箭头显示/隐藏切换功能的技术求助

Hey there! Let's get that arrow toggle logic working properly. Looking at your code, the main issues are that you're trying to directly manipulate DOM styles (which goes against React's declarative approach) and using function references for conditional checks (like !handleScrollUp)—those won't work because functions are always truthy values, so those conditions will never trigger as expected.

Let's Refactor This with React State #

Instead of messing with DOM styles, we'll use a single state variable to track which arrow should be visible. This keeps everything clean and aligned with React's way of handling UI updates.

First, add a state variable to your component:

import { useState } from 'react';
// ... other imports (Header, Body, FaChevronDown, FaChevronUp)

const YourComponent = () => {
  // false = show down arrow; true = show up arrow
  const [showUpArrow, setShowUpArrow] = useState(false);
  
  // Keep your existing scroll functions here
  const handleScrollDown = () => {
    // Your scroll-down logic goes here
  };
  
  const handleScrollUp = () => {
    // Your scroll-up logic goes here
  };
  
  return (
    <div>
      <Header />
      {/* Show down arrow when up arrow is hidden */}
      {!showUpArrow && (
        <FaChevronDown 
          className='flachDown' 
          onClick={() => {
            handleScrollDown();
            setShowUpArrow(true); // Switch to display up arrow
          }} 
        />
      )}
      {/* Show up arrow when down arrow is hidden */}
      {showUpArrow && (
        <FaChevronUp 
          className='flachUp' 
          onClick={() => {
            handleScrollUp();
            setShowUpArrow(false); // Switch back to display down arrow
          }} 
        />
      )}
      <Body />
    </div>
  );
};

Why This Works #

• State-driven UI: The showUpArrow state controls exactly which arrow is rendered. No manual DOM manipulation needed—React handles updating the UI automatically when the state changes.
• Clear Toggle Logic: Clicking the down arrow runs your scroll logic and switches the state to show the up arrow. Clicking the up arrow does the reverse, creating a clean mutual exclusion effect.
• Maintainable Code: This approach is easy to debug and modify later. If you ever need to add extra rules (like hiding both arrows in specific scenarios), you just adjust the state checks.

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