React中如何在VisibilitySensor触发可见时为指定元素添加类名

Hey there! Let's get this sorted out properly. First, let's fix a critical bug in your existing code, then walk through the right way to add those animation classes.

First: Fix the Condition Bug #

Your current if(isVisible = 'visible') is doing an assignment (setting isVisible to the string 'visible') instead of a comparison. Even worse, the onChange callback from VisibilitySensor passes a boolean value (true when visible, false when hidden), not a string. So your condition should check the boolean directly.

Recommended Approach: Use React State (Data-Driven DOM) #

Since you're working with React (and react-visibility-sensor), the best practice is to use state to track visibility and dynamically update the class name. This keeps your DOM in sync with React's virtual DOM, avoiding unexpected overrides.

For Function Components (with Hooks)

import React, { useState } from 'react';
import VisibilitySensor from 'react-visibility-sensor';

function YourComponent() {
  // Track visibility state for the target div
  const [isTargetVisible, setIsTargetVisible] = useState(false);

  const onChange = (isVisible) => {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    // Update state with the boolean visibility value
    setIsTargetVisible(isVisible);
  };

  return (
    <div>
      <VisibilitySensor onChange={onChange}>
        {/* Dynamically build the class name based on state */}
        <div 
          className={`Need ${isTargetVisible ? 'animated fadeInUp' : ''}`}
        >
          {/* Your content goes here */}
        </div>
      </VisibilitySensor>
    </div>
  );
}

For Class Components

import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class YourComponent extends Component {
  state = {
    isTargetVisible: false
  };

  onChange = (isVisible) => {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    this.setState({ isTargetVisible: isVisible });
  };

  render() {
    const { isTargetVisible } = this.state;
    return (
      <div>
        <VisibilitySensor onChange={this.onChange}>
          <div 
            className={`Need ${isTargetVisible ? 'animated fadeInUp' : ''}`}
          >
            {/* Your content goes here */}
          </div>
        </VisibilitySensor>
      </div>
    );
  }
}

Alternative: Direct DOM Manipulation (Not Recommended) #

If you absolutely need to modify the DOM directly (avoid this if possible, as it can conflict with React's automatic updates), you can use classList to add/remove the classes:

const onChange = function (isVisible) {
  console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
  const targetDiv = document.querySelector('.Need');
  
  if (!targetDiv) return; // Exit early if the element isn't found

  if (isVisible) {
    // Add the animation classes
    targetDiv.classList.add('animated', 'fadeInUp');
  } else {
    // Optional: Remove classes when the element is hidden
    targetDiv.classList.remove('animated', 'fadeInUp');
  }
};

Key Takeaways: #

• Always use === (or just check the boolean value) for comparisons—never use = in conditionals, as that's an assignment, not a check.
• React's state management is the safest way to handle DOM updates; direct DOM changes can be overwritten when React re-renders your component.

内容的提问来源于stack exchange，提问作者Piotr Żak