如何批量访问React中渲染的多个<path> DOM节点？

Hey there! Let's break down how to access all your path nodes cleanly—especially when dealing with 20-50 elements—and hook this up with Redux as you planned. Hardcoding refs for every single path is definitely not scalable, so these approaches will save you a ton of hassle.

1. Use a useRef Array to Store Refs Dynamically #

Instead of creating individual refs for each path, you can use a single useRef to hold an array of references to each DOM element. Here's how to adjust your existing code:

import { useRef, useEffect } from 'react';

// Your original path list
const pathList = [ 
  { d: 'M 500 500 L 800 500', fill: 'transparent', stroke: '#f00' }, 
  { d: 'M 810 500 L 1105 500', fill: 'transparent', stroke: '#f00' }, 
  { d: 'M 1110 500 L 1410 500 L 1410 810 L 810 810', fill: 'transparent', stroke: '#f00' }, 
  { d: 'M 800 810 L 500 810', fill: 'transparent', stroke: '#f00' }, 
  { d: 'M 805 495 L 805 195', fill: 'transparent', stroke: '#000' }, 
  { d: 'M 805 505 L 805 805', fill: 'transparent', stroke: '#000' }
];

const PathComponent = () => {
  // Initialize a ref to hold our array of path elements
  const pathRefs = useRef([]);

  // Reset the refs array if pathList updates (prevents stale references)
  useEffect(() => {
    pathRefs.current = [];
  }, [pathList]);

  // Callback ref to populate the array with each path element
  const assignPathRef = (element, index) => {
    if (element) {
      pathRefs.current[index] = element;
    }
  };

  // Render paths with the dynamic ref callback
  const paths = pathList.map((pathProps, index) => (
    <path
      key={index} // Use a unique ID from pathList if you have one instead of index
      {...pathProps}
      ref={(el) => assignPathRef(el, index)}
    />
  ));

  // Example: Access all path nodes after component mounts
  useEffect(() => {
    pathRefs.current.forEach((pathEl, idx) => {
      if (pathEl) {
        // Get path length (one of the values you mentioned needing)
        const pathLength = pathEl.getTotalLength();
        // Get a point along the path (e.g., midpoint)
        const midPoint = pathEl.getPointAtLength(pathLength / 2);
        
        console.log(`Path ${idx}: Length = ${pathLength}, Midpoint = (${midPoint.x}, ${midPoint.y})`);
        // This is where you'd prepare data to send to Redux
      }
    });
  }, []);

  return <svg>{paths}</svg>;
};

Why this works: #

• The assignPathRef callback adds each path's DOM element to the pathRefs.current array at the correct index.
• No more manual ref creation for every path—this scales seamlessly to 50+ elements.
• The second useEffect ensures you only access the refs after the component has mounted and the paths are rendered.

2. Integrate with Redux: Store Serializable Data (Not DOM Nodes) #

Important rule: never store DOM nodes directly in Redux—they're not serializable and can cause bugs with state persistence or rehydration. Instead, extract the data you need (like path length, coordinates) and store that plain data.

Here's how to dispatch this data to Redux:

import { useDispatch } from 'react-redux';
// Assume you have an action creator defined for updating path data
import { updatePathData } from './redux/actions';

const PathComponent = () => {
  const dispatch = useDispatch();
  const pathRefs = useRef([]);

  // ... rest of the setup from the first example

  useEffect(() => {
    // Extract serializable data from each path element
    const serializedPathData = pathRefs.current.map((pathEl, idx) => {
      if (!pathEl) return null;

      const length = pathEl.getTotalLength();
      const startPoint = pathEl.getPointAtLength(0);
      const endPoint = pathEl.getPointAtLength(length);

      return {
        id: idx, // Replace with a unique ID from your pathList if available
        length,
        start: { x: startPoint.x, y: startPoint.y },
        end: { x: endPoint.x, y: endPoint.y }
      };
    }).filter(Boolean); // Remove any null entries if paths failed to render

    // Dispatch the data to Redux
    dispatch(updatePathData(serializedPathData));
  }, [dispatch]);

  // ... rest of the component
};

Key tips for Redux integration: #

• Use SVG's built-in path methods like getTotalLength() and getPointAtLength() to fetch the exact data you need.
• If your pathList updates dynamically, add pathList as a dependency to the useEffect so you re-calculate and dispatch updated data automatically.
• Keep your Redux state as plain objects/numbers/strings—this ensures it's serializable and plays nice with Redux dev tools.

Bonus: If You Need to Expose Paths to a Parent Component #

If you need a parent component to access these path elements, you can combine the ref array with forwardRef and useImperativeHandle, but this is only necessary for specific use cases. For most scenarios, the first approach above is more than enough.

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