在 Component/Element 内带有参数的 React 函数

Question

我刚刚使用了一个名为 react-axios 的库，其中以下列方式在组件内部提供了一个函数：

<Get url="/api/user" params={{id: "12345"}}>
{(parameters) => {
 //some callback with the parameters
}}
</Get>

由于我以前从未见过这种语法并且总是通过 props 传递函数，所以我很好奇：

• 这种函数规范在 React 中是如何调用的？
• 一个Component怎么实现成这样？
• 它也适用于功能组件吗？

Answer 1

• 这种类型的函数规范在 React 中是如何调用的？

您在问题中建议的模式称为渲染道具模式

• 一个Component怎么实现成这样？

一个非常基本的实现可以像下面这样

    function Get(props) {
       const [params, setParams] = useState({}); 
       ...
       return (
        <div>{props.children(params)}</div>
       )
    }

• 它也适用于功能组件吗？

是的，它可以为功能组件以及 class 组件编写