React中如何从父组件访问子组件的props.children？

你当前的写法无法获取到Child组件返回的段落，核心原因是：

• Parent中的children是<Child/>对应的React元素，它的props.children是你传给Child组件的子元素，但你在Main里并没有给<Child/>传递任何子元素，所以它的props是空对象。
• Child组件自己返回的<p>是它的内部渲染输出，不属于它的props.children，因此无法通过children.props.children直接访问。

下面是几种可行的解决方式：

方式1：让Child组件接收并传递内容（推荐） #

如果Child组件是你可以修改的，直接通过props让父组件控制内容，或者让Child接收children并渲染：

场景A：通过自定义props传递内容 #

function Child({ content }) {
  return <p>{content}</p>;
}

function Main() {
  return (
    <Parent>
      <Child content="这是段落内容" />
    </Parent>
  );
}

function Parent({ children }) {
  // 此时可以拿到传给Child的content
  console.log(children.props.content);
  return children;
}

场景B：让Child接收children并渲染 #

function Child({ children }) {
  return <p>{children}</p>;
}

function Main() {
  return (
    <Parent>
      <Child>这是段落内容</Child>
    </Parent>
  );
}

function Parent({ children }) {
  // 这里的children.props.children就是传给Child的文本
  console.log(children.props.children);
  return children;
}

方式2：使用Ref获取Child的内部内容 #

如果Child的内容是固定的，无法通过props传递，可通过Ref来获取它的内部DOM或内容：

函数组件（需配合forwardRef和useImperativeHandle） #

import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';

// 用forwardRef转发ref
const Child = forwardRef((props, ref) => {
  const paragraphRef = useRef(null);

  // 暴露内部方法或DOM给父组件
  useImperativeHandle(ref, () => ({
    getParagraphText: () => paragraphRef.current?.textContent,
    paragraphDOM: paragraphRef.current
  }));

  return <p ref={paragraphRef}>这是固定段落内容</p>;
});

function Parent({ children }) {
  const childRef = useRef(null);

  useEffect(() => {
    if (childRef.current) {
      // 获取段落文本
      console.log(childRef.current.getParagraphText());
      // 获取段落DOM元素
      console.log(childRef.current.paragraphDOM);
    }
  }, []);

  // 给Child元素绑定ref
  return React.cloneElement(children, { ref: childRef });
}

function Main() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

类组件 #

如果Child是类组件，可直接通过ref获取实例：

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.paragraphRef = React.createRef();
  }

  getParagraphText() {
    return this.paragraphRef.current?.textContent;
  }

  render() {
    return <p ref={this.paragraphRef}>这是固定段落内容</p>;
  }
}

function Parent({ children }) {
  const childRef = useRef(null);

  useEffect(() => {
    if (childRef.current) {
      console.log(childRef.current.getParagraphText());
    }
  }, []);

  return React.cloneElement(children, { ref: childRef });
}

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