React中如何通过Function as a Child Component实现组件向子函数返回变量

希望大家能帮我解答这个疑问。我在使用React的Route组件时产生了这个想法，暂时没能自己想通实现方式。

React的<Route>组件看起来是正常渲染子元素，但同时还能返回match这类变量供子元素使用，示例如下：

<Route exact path="/">
  {({ match }) => (
    <div>
      {`${JSON.stringify(match)}`}
    </div>
  )}
</Route>

可以注意到match并没有在当前组件的任何位置声明，而是由Route组件返回，因此可以在子元素中直接访问。

如果我想在自己编写的组件中实现这个功能，应该怎么操作呢？

我之前尝试过如下写法：

const Test = (props: any): any => {
  return {
    testVariable: "test variable",
    render: (
      <>
        {props.children}
      </>
    ) 
  };
};

我预期的调用方式是这样的：

<Test>
  {({ testVariable }) => (
    <p>{testVariable}</p>
  )}
</Test>

但实际运行并没有达到我的预期效果。

补充：问题已经解决，感谢novonimo的回答，我了解到该功能的专业术语是Function as a Child Component (FaCC)。

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