如何将jQuery代码$('.row_1').css('display','none')转为React函数式写法？

Hey there! Converting that jQuery code to React is straightforward once you understand React's state-driven approach—unlike jQuery which manipulates the DOM directly, React prefers to tie UI changes to component state. Let's go through the best ways to do this:

1. Conditional Rendering (React's Recommended Approach) #

This is the standard React way to control visibility, as it keeps your UI in sync with component state instead of manually tweaking the DOM. We'll use the useState hook to track whether the row should be visible, then conditionally render it:

import { useState } from 'react';

function MyComponent() {
  // Start with the row visible (you can set this to false if you want it hidden by default)
  const [isRow1Visible, setIsRow1Visible] = useState(true);

  // Example function to trigger hiding the row (call this whenever you need to hide it)
  const hideRow1 = () => {
    setIsRow1Visible(false);
  };

  return (
    <div>
      {/* Optional: Button to trigger the hide action (replace with your actual trigger) */}
      <button onClick={hideRow1}>Hide Row 1</button>
      
      {/* Only render the row if isRow1Visible is true */}
      {isRow1Visible && (
        <div className="row_1">
          Your row content here
        </div>
      )}
    </div>
  );
}

Instead of directly setting display: none, React will either render the element or not based on the state. This is cleaner and avoids potential inconsistencies between your component's state and the DOM.

2. Direct DOM Manipulation (Only for Edge Cases) #

If you absolutely need to manipulate the DOM directly (e.g., integrating with a third-party library that doesn't play nice with React's state), you can use the useRef hook to grab the DOM element and modify its style. Note: This should be a last resort, as it bypasses React's state management.

import { useRef, useEffect } from 'react';

function MyComponent() {
  // Create a ref to access the row element
  const row1Ref = useRef(null);

  // Hide the row when the component mounts (adjust the useEffect dependency array to trigger on other events)
  useEffect(() => {
    if (row1Ref.current) {
      row1Ref.current.style.display = 'none';
    }
  }, []); // Empty array means this runs once after the component mounts

  return (
    <div>
      <div ref={row1Ref} className="row_1">
        Your row content here
      </div>
    </div>
  );
}

Quick Comparison #

• jQuery: Finds the .row_1 element and directly modifies its CSS.
• React (Conditional Rendering): Uses state to describe whether the element should exist, and React handles updating the DOM.
• React (Direct DOM Manipulation): Rarely needed, but useful for edge cases where you can't rely on state.

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