React技术问询：如何将嵌套子组件元素传递给嵌套父组件

我来帮你梳理这个问题的几种实用解决方案，毕竟在React里要把深层子组件的元素传递给上层父组件，通常有几种可靠的思路：

方法1：用回调函数传递Button节点 #

这种方式是让父组件Dialog提供一个回调函数，逐层传递到包含Button的子组件NewsletterConfirmed，子组件把Button的React节点通过回调传给父组件，父组件再将它赋值给closeButtonContent。

代码示例： #

首先是Dialog组件：

import { useState } from 'react';

function Dialog({ children }) {
  const [closeButton, setCloseButton] = useState(null);

  // 定义接收Button的回调
  const handleReceiveCloseButton = (buttonNode) => {
    setCloseButton(buttonNode);
  };

  return (
    <div className="dialog">
      {/* 用拿到的Button作为关闭按钮内容 */}
      <div className="dialog-header">
        {closeButton && <div className="close-btn-container">{closeButton}</div>}
      </div>
      {/* 把回调传递给子组件NewsletterWrapper */}
      {React.cloneElement(children, { onReceiveCloseButton: handleReceiveCloseButton })}
    </div>
  );
}

然后是NewsletterWrapper组件，继续把回调往下传：

function NewsletterWrapper({ onReceiveCloseButton, ...props }) {
  return (
    <div className="newsletter-wrapper">
      <NewsletterConfirmed onReceiveCloseButton={onReceiveCloseButton} />
    </div>
  );
}

最后是NewsletterConfirmed组件，创建Button并通过回调传递：

import { useEffect } from 'react';

function NewsletterConfirmed({ onReceiveCloseButton }) {
  const closeButton = (
    <Button onClick={() => console.log('关闭弹窗')}>
      关闭
    </Button>
  );

  // 组件挂载时把Button传给父组件
  useEffect(() => {
    onReceiveCloseButton(closeButton);
  }, [onReceiveCloseButton, closeButton]);

  return (
    <div className="newsletter-confirmed">
      <p>订阅成功！</p>
      {/* 这里也可以渲染这个Button，或者只传递给父组件 */}
      {closeButton}
    </div>
  );
}

这样Dialog就能拿到子组件里的Button，用作closeButtonContent了。

方法2：用React Refs获取DOM元素 #

如果你的Dialog需要直接操作Button的DOM元素（比如调用focus()、设置原生属性），那用Ref来获取是最合适的。

代码示例： #

首先在Dialog里创建Ref：

import { useRef, useEffect } from 'react';

function Dialog({ children }) {
  const closeButtonRef = useRef(null);

  useEffect(() => {
    if (closeButtonRef.current) {
      // 这里可以操作DOM，比如自动聚焦
      closeButtonRef.current.focus();
    }
  }, []);

  // 把Ref传递给子组件
  return (
    <div className="dialog">
      {React.cloneElement(children, { closeButtonRef })}
    </div>
  );
}

NewsletterWrapper继续传递Ref：

function NewsletterWrapper({ closeButtonRef, ...props }) {
  return (
    <div className="newsletter-wrapper">
      <NewsletterConfirmed closeButtonRef={closeButtonRef} />
    </div>
  );
}

NewsletterConfirmed把Ref绑定到Button上：

function NewsletterConfirmed({ closeButtonRef }) {
  return (
    <div className="newsletter-confirmed">
      <p>订阅成功！</p>
      <Button ref={closeButtonRef} onClick={() => console.log('关闭弹窗')}>
        关闭
      </Button>
    </div>
  );
}

⚠️ 注意：如果你的Button是自定义组件，必须用React.forwardRef转发Ref，否则Ref会绑定到自定义组件本身，而不是内部的DOM按钮：

const Button = React.forwardRef(({ children, onClick }, ref) => {
  return (
    <button ref={ref} onClick={onClick} className="custom-button">
      {children}
    </button>
  );
});

方法3：把Button提升到Dialog组件中 #

如果业务逻辑允许，最简单的方式是把Button的定义直接放到Dialog里，同时作为closeButtonContent和传递给子组件的props，两边共用同一个Button：

function Dialog({ children }) {
  const closeButton = (
    <Button onClick={() => console.log('关闭弹窗')}>
      关闭
    </Button>
  );

  return (
    <div className="dialog">
      <div className="dialog-header">
        <div className="close-btn-container">{closeButton}</div>
      </div>
      {/* 把Button传递给子组件 */}
      {React.cloneElement(children, { closeButton })}
    </div>
  );
}

// NewsletterWrapper接收Button并传给NewsletterConfirmed
function NewsletterWrapper({ closeButton, ...props }) {
  return (
    <div className="newsletter-wrapper">
      <NewsletterConfirmed closeButton={closeButton} />
    </div>
  );
}

// NewsletterConfirmed直接使用传递过来的Button
function NewsletterConfirmed({ closeButton }) {
  return (
    <div className="newsletter-confirmed">
      <p>订阅成功！</p>
      {closeButton}
    </div>
  );
}

这种方式完全避免了多层传递的复杂度，只要Button的逻辑不依赖子组件的内部状态，非常推荐使用。

选择建议 #

• 若只需传递React节点用于渲染：方法1或方法3更合适；
• 若需要直接操作DOM元素：方法2是正确选择；
• 若Button逻辑独立于子组件：优先选方法3，最省心。

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