React：将 JSX 组件传递给父级

Question

我正在使用来自第三方库（antd）的抽屉组件。它接受标题或页脚等可以是 JSX 元素的属性。

如何在子组件中动态定义标题并将其传递给抽屉所在的父组件？ useState 似乎不是正确的选择，因为 useState 不应包含 JSX 元素。

const Inner = () => {

  const drawerTitle = <div>This should be the <strong>drawer title</strong></div>

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

const PageDrawer = () => {

   return (
      <Drawer
         title={???}
         open={true}
      >
         <Inner />
      </Drawer>
   )
}

Answer 1

关于标题动态更改的部分丢失了，所以我假设标题会根据某些道具而改变

const Inner = (onDrawerTitleChange) => {

  const someProp = true; //change to false dynamically or whatever your logic requires

  const drawerTitleFactory = React.useCallback(someProp => {

    const drawerTitle = someProp ? (<div>This should be the <strong>drawer title</strong></div>) : (<div>other title</div>)

    onDrawerTitleChange(drawerTitle)  

  }, [onDrawerTitleChange, someProp]);

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


const PageDrawer = () => {

   const [drawerTitle, setDrawerTitle] = React.useState(null);

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

在不知道需求的情况下很难确切地说出您需要什么，但我们的想法是如果内部组件发生变化，则更新父组件的状态。如果你的孩子不必是 JSX，而是可以用作工厂的道具，那就容易多了。

其他选项是：

• 背景
• Redux、Flux、RQ 等状态管理工具