React实现脚注连续编号遇阻，寻求可行解决方案

问题根源 #

直接操作DOM的方式失效，是因为React的渲染异步性——组件执行document.querySelectorAll时，后续脚注组件可能还未完成DOM挂载，导致统计数量不准确。而Context方案顺序混乱，是因为React组件渲染顺序不一定和最终DOM节点顺序一致（比如存在条件渲染、Suspense或并发渲染场景）。

方案一：改进DOM操作实现（简单直接） #

核心思路是在组件挂载完成后（useEffect中），基于DOM节点的实际顺序计算索引，规避渲染阶段的异步问题。

代码示例：

import { useEffect, useRef, useState } from 'react';

const Footnote = ({ content }) => {
  const [index, setIndex] = useState(null);
  const footnoteRef = useRef(null);

  useEffect(() => {
    if (!footnoteRef.current) return;
    // 获取所有脚注元素，按DOM自然顺序排列
    const allFootnotes = Array.from(document.querySelectorAll('.footnote'));
    // 计算当前元素的编号（+1是因为脚注从1开始计数）
    const currentIndex = allFootnotes.indexOf(footnoteRef.current) + 1;
    setIndex(currentIndex);

    // 监听DOM变化，自动更新编号
    const observer = new MutationObserver(() => {
      const updatedFootnotes = Array.from(document.querySelectorAll('.footnote'));
      setIndex(updatedFootnotes.indexOf(footnoteRef.current) + 1);
    });
    observer.observe(document.body, { childList: true, subtree: true });

    return () => observer.disconnect();
  }, []);

  if (index === null) return null;
  return (
    <sup ref={footnoteRef} className="footnote" id={`fn-mark-${index}`}>
      <a href={`#fn-${index}`}>{index}</a>
    </sup>
  );
};

// 文章末尾的脚注列表容器
const FootnoteList = () => {
  const [footnotes, setFootnotes] = useState([]);

  useEffect(() => {
    const updateFootnotes = () => {
      // 从DOM中提取所有脚注内容（这里假设内容存在于data-content属性）
      const newFootnotes = Array.from(document.querySelectorAll('.footnote')).map((el, idx) => ({
        index: idx + 1,
        content: el.dataset.content
      }));
      setFootnotes(newFootnotes);
    };

    updateFootnotes();
    const observer = new MutationObserver(updateFootnotes);
    observer.observe(document.body, { childList: true, subtree: true });

    return () => observer.disconnect();
  }, []);

  return (
    <div className="footnote-list">
      <h3>脚注</h3>
      <ol>
        {footnotes.map((note) => (
          <li key={note.index} id={`fn-${note.index}`}>
            {note.content}
            <a href={`#fn-mark-${note.index}`} className="footnote-back">↑</a>
          </li>
        ))}
      </ol>
    </div>
  );
};

说明：

• 用useEffect确保DOM挂载后再计算索引，避免渲染阶段的异步误差。
• 借助MutationObserver监听脚注的添加/删除操作，自动更新编号和列表。
• 脚注内容可通过data-content属性传递，或根据实际组件结构调整提取逻辑。

方案二：React风格的Context+Ref排序方案（推荐） #

核心思路是通过Context注册所有脚注的Ref和内容，在列表组件中根据Ref的DOM位置排序，确保编号顺序与页面显示顺序完全一致。

代码示例：

import { createContext, useContext, useEffect, useRef, useState } from 'react';

const FootnoteContext = createContext({
  registerFootnote: () => {},
  unregisterFootnote: () => {}
});

// 脚注提供者，包裹文章内容和脚注列表
export const FootnoteProvider = ({ children }) => {
  const [footnotes, setFootnotes] = useState([]);

  // 注册脚注：传入元素Ref和内容
  const registerFootnote = (ref, content) => {
    setFootnotes(prev => [...prev, { ref, content }]);
  };

  // 卸载时注销脚注，避免内存泄漏
  const unregisterFootnote = (ref) => {
    setFootnotes(prev => prev.filter(note => note.ref !== ref));
  };

  // 根据DOM节点的实际位置排序脚注
  const sortedFootnotes = [...footnotes].sort((a, b) => {
    if (!a.ref.current || !b.ref.current) return 0;
    // 用compareDocumentPosition精准判断节点顺序
    const position = a.ref.current.compareDocumentPosition(b.ref.current);
    if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
    if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
    return 0;
  });

  return (
    <FootnoteContext.Provider value={{ registerFootnote, unregisterFootnote }}>
      {children}
      <div className="footnote-list">
        <h3>脚注</h3>
        <ol>
          {sortedFootnotes.map((note, idx) => (
            <li key={idx} id={`fn-${idx + 1}`}>
              {note.content}
              <a href={`#fn-mark-${idx + 1}`} className="footnote-back">↑</a>
            </li>
          ))}
        </ol>
      </div>
    </FootnoteContext.Provider>
  );
};

// 脚注标记组件
export const Footnote = ({ content }) => {
  const { registerFootnote, unregisterFootnote } = useContext(FootnoteContext);
  const ref = useRef(null);
  const [index, setIndex] = useState(null);

  useEffect(() => {
    if (!ref.current) return;
    registerFootnote(ref, content);

    // 监听DOM变化，更新当前脚注的编号
    const updateIndex = () => {
      const allFootnotes = Array.from(document.querySelectorAll('.footnote-mark'));
      setIndex(allFootnotes.indexOf(ref.current) + 1);
    };

    updateIndex();
    const observer = new MutationObserver(updateIndex);
    observer.observe(document.body, { childList: true, subtree: true });

    return () => {
      unregisterFootnote(ref);
      observer.disconnect();
    };
  }, [content, registerFootnote, unregisterFootnote]);

  if (index === null) return null;
  return (
    <sup ref={ref} className="footnote-mark" id={`fn-mark-${index}`}>
      <a href={`#fn-${index}`}>{index}</a>
    </sup>
  );
};

说明：

• 用FootnoteProvider统一管理脚注的注册/注销，通过compareDocumentPosition确保脚注按DOM顺序排序，不受React渲染顺序影响。
• 每个Footnote组件挂载时注册自身Ref，卸载时注销，避免无效数据残留。
• 借助MutationObserver实时同步脚注编号，适配动态添加/删除场景。

关键注意事项 #

• 避免在组件渲染阶段（useLayoutEffect之前）操作DOM，确保DOM已完全挂载。
• 若使用SSR，需在客户端hydrate完成后再计算编号，避免服务端与客户端渲染不一致。
• 并发渲染场景下，compareDocumentPosition是判断DOM顺序最可靠的方式。

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