如何使用功能方法将道具传递给内部反应组件

Question

我正在使用以下功能方法进行反应

const Divider: React.FunctionComponent = ({children}) => (
   <div>
      // I want to use color props here of Card
      divider
      {children}
   </div>
);

const Card: React.FunctionComponent = ({children, color}) => {
 const color = props.color

 return(
   <div>
      card
      {children}
   </div>
 )}

Card.Divider = Divider;

，并将这些组件称为以下

<Card color="red">
 <Card.Divider>
  Any text
 <Card.Divider/>
<Card />

的问题：我如何在分隔器组件中获取颜色道具

ps：i 不要想要重复再次通过划分的道具，例如遵循

<Card color="red">
 <Card.Divider color="red">
  Any text
 <Card.Divider/>
<Card />

我想要的是以下方法，并且仍然能够在分隔组件中使用颜色道具，我该怎么做

<Card color="red">
 <Card.Divider>
  Any text
 <Card.Divider/>
<Card />