React：如何通过Context将ReactNode传给祖先组件并渲染

方案一：Context 传递渲染内容 #

通过 React Context 建立祖先与后代的通信，子组件将需要渲染的内容通过 Context 传递给祖先，由祖先负责渲染。这种方式适合组件层级较深的场景，无需逐层传递 props。

实现代码 #

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

// 创建上下文，用于传递设置内容的方法
const PortalContext = createContext(null);

// 封装ToAncestor组件，负责传递内容到上下文
const ToAncestor = ({ children }) => {
  const setAncestorContent = useContext(PortalContext);
  // 组件挂载时传递内容，卸载时清空
  useState(() => {
    setAncestorContent(children);
    return () => setAncestorContent(null);
  }, [children, setAncestorContent]);
  
  return null; // 这个组件不在当前位置渲染内容
};

// 祖先组件，提供上下文并渲染接收的内容
const Ancestor = () => {
  const [secondaryContent, setSecondaryContent] = useState(null);
  
  return (
    <PortalContext.Provider value={setSecondaryContent}>
      <Parent />
      {/* 渲染来自子组件的内容 */}
      {secondaryContent}
    </PortalContext.Provider>
  );
};

const Parent = () => <Children />;

const Children = () => (
  <>
    <div>Primary 内容</div>
    <ToAncestor>
      <div>Secondary 内容</div>
    </ToAncestor>
  </>
);

优缺点 #

• 优点：无需逐层传递 props，适合深层组件通信；内容完全在 React 组件树内管理，符合 React 数据流。
• 缺点：如果多个子组件同时使用，需要处理内容覆盖问题，可扩展为存储数组内容。

方案二：回调函数向上传递 #

通过 props 逐层传递回调函数，子组件调用回调将需要渲染的内容传递给祖先组件。这种方式适合组件层级较浅的场景，逻辑更直观。

实现代码 #

import { useState } from 'react';

const ToAncestor = ({ children, onContentChange }) => {
  useState(() => {
    onContentChange(children);
    return () => onContentChange(null);
  }, [children, onContentChange]);
  
  return null;
};

const Ancestor = () => {
  const [secondaryContent, setSecondaryContent] = useState(null);
  
  return (
    <>
      <Parent onContentChange={setSecondaryContent} />
      {secondaryContent}
    </>
  );
};

const Parent = ({ onContentChange }) => (
  <Children onContentChange={onContentChange} />
);

const Children = ({ onContentChange }) => (
  <>
    <div>Primary 内容</div>
    <ToAncestor onContentChange={onContentChange}>
      <div>Secondary 内容</div>
    </ToAncestor>
  </>
);

优缺点 #

• 优点：逻辑简单直接，调试方便；无需额外创建 Context。
• 缺点：组件层级较深时，需要逐层传递回调，代码冗余。

方案三：原生 Portal 的组件树内兼容用法 #

React 原生 Portal 会将 DOM 节点挂载到指定的 DOM 容器，但组件树仍保留在原位置（即事件冒泡仍遵循组件树层级）。如果需要 DOM 上渲染到祖先位置，但保持组件树关系，可使用此方案。

实现代码 #

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

const ToAncestor = ({ children, containerRef }) => {
  // 确保容器存在时才创建Portal
  const [canRender, setCanRender] = useState(false);
  
  useEffect(() => {
    if (containerRef.current) {
      setCanRender(true);
    }
  }, [containerRef]);
  
  if (!canRender) return null;
  
  return createPortal(children, containerRef.current);
};

const Ancestor = () => {
  const secondaryContainerRef = useRef(null);
  
  return (
    <>
      <Parent secondaryContainerRef={secondaryContainerRef} />
      {/* 用于挂载Portal内容的容器 */}
      <div ref={secondaryContainerRef} />
    </>
  );
};

const Parent = ({ secondaryContainerRef }) => (
  <Children secondaryContainerRef={secondaryContainerRef} />
);

const Children = ({ secondaryContainerRef }) => (
  <>
    <div>Primary 内容</div>
    <ToAncestor containerRef={secondaryContainerRef}>
      <div>Secondary 内容</div>
    </ToAncestor>
  </>
);

优缺点 #

• 优点：DOM 结构上内容渲染到祖先位置，组件树仍保留在原位置，事件冒泡正常工作。
• 缺点：依赖 DOM 容器，需要确保容器存在后再渲染，相比前两种方案多了 DOM 操作的依赖。

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