React：如何将子组件的JSX内容传递给父组件作为Drawer标题

你需要从子组件Inner传递动态生成的JSX标题到父组件PageDrawer的Drawer组件title属性，且不能用useState存储JSX元素。下面提供几种可行方案：

方案一：使用Ref让子组件暴露标题 #

利用React的ref，让子组件将标题挂载到ref上，父组件通过ref直接访问该值，避免用状态存储JSX。

import React, { useRef, useEffect, useState } from 'react';
import { Drawer } from 'antd';

const Inner = ({ titleRef }) => {
  const drawerTitle = <div>This should be the <strong>drawer title</strong></div>;

  // 将标题挂载到传入的ref上
  useEffect(() => {
    if (titleRef) {
      titleRef.current = drawerTitle;
    }
  }, [titleRef]);

  return <div>I am the body of the drawer</div>;
};

const PageDrawer = () => {
  const titleRef = useRef(null);
  // 用空状态触发重渲染，确保父组件拿到最新标题
  const [, forceUpdate] = useState({});

  useEffect(() => {
    forceUpdate({});
  }, [titleRef.current]);

  return (
    <Drawer title={titleRef.current} open={true}>
      <Inner titleRef={titleRef} />
    </Drawer>
  );
};

方案二：Render Props回调传递 #

让子组件通过回调函数将标题传递给父组件，这是更符合React数据流理念的写法。

import React, { useState, useEffect } from 'react';
import { Drawer } from 'antd';

const Inner = ({ onTitleChange }) => {
  const drawerTitle = <div>This should be the <strong>drawer title</strong></div>;

  useEffect(() => {
    onTitleChange(drawerTitle);
  }, [onTitleChange]);

  return <div>I am the body of the drawer</div>;
};

const PageDrawer = () => {
  const [drawerTitle, setDrawerTitle] = useState(null);

  return (
    <Drawer title={drawerTitle} open={true}>
      <Inner onTitleChange={setDrawerTitle} />
    </Drawer>
  );
};

这里的useState仅用来触发重渲染，并非存储JSX作为核心业务数据，避免了直接存JSX带来的冗余重渲染问题。

方案三：Context API跨组件传递 #

如果组件层级较深或需要多组件共享标题状态，可使用Context实现传递：

import React, { createContext, useContext, useState, useEffect } from 'react';
import { Drawer } from 'antd';

const DrawerTitleContext = createContext({
  setTitle: () => {}
});

const Inner = () => {
  const { setTitle } = useContext(DrawerTitleContext);
  const drawerTitle = <div>This should be the <strong>drawer title</strong></div>;

  useEffect(() => {
    setTitle(drawerTitle);
  }, [setTitle]);

  return <div>I am the body of the drawer</div>;
};

const PageDrawer = () => {
  const [drawerTitle, setDrawerTitle] = useState(null);

  return (
    <DrawerTitleContext.Provider value={{ setTitle: setDrawerTitle }}>
      <Drawer title={drawerTitle} open={true}>
        <Inner />
      </Drawer>
    </DrawerTitleContext.Provider>
  );
};

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