Reactjs 您能解释一下这个react本机代码（render方法中的奇怪箭头函数）吗？

这是我正在阅读的一本教科书中的一些React本机代码，特别是来自App.js的render方法。当然/*…*/将用实际代码填充，但这与我的问题无关

<MeasureLayout>
        {layout => (
            <KeyboardState layout={layout}>
                {keyboardInfo => /* … */}
            </KeyboardState>
        )}
</MeasureLayout>

{布局=>(
{keyboardInfo=>/*…*/}
)}

---

我不明白的是

{layout=>（…

。所以我认为布局是一个返回这个keyboardState组件的箭头函数。那么布局是如何在这一部分传递到keyboardState的布局道具的呢

？我为什么要这样做呢？这整部分真的让我困惑。

看到了吗

{}

inside render方法用于某些javascript语句

例如

<Text>
{personFirstNam +" " +personLastName}
</Text>

或者，如果你想在那里进行一些操作

{layout =>{
 let extractData = fromSomeWhere;
 let calculatePosition = getPosition();
 return (<KeyboardState layout={layout}>
            {keyboardInfo => /* … */}
        </KeyboardState>)
}}

{layout=>{
让extractData=从某处；
让calculatePosition=getPosition（）；
返回(
{keyboardInfo=>/*…*/}
)
}}

---

所有这些都只是在一个JSX元素内执行一些JS语句执行/操作。

React组件具有

props

和

children

属性。

children

属性通常是React节点，但也可以是返回React节点的函数

---

那个么，布局如何在这一部分传递到keyboardState的布局道具中呢

创建了

MeasureLayout

组件，以便将其

children

属性定义为函数而不是React节点

我为什么要这么做呢

用于依赖项注入，并作为一种模式，允许使用基于类的组件进行更具声明性的编程

---

一些更深入的阅读：

主题：作为孩子的功能

该

将参数作为函数传递给其子级。要接收该参数，使用arrow函数

所以，

的代码基本上是

功能布局（道具）{
//做事
//布局=一些结果。
返回{props.children（布局）}
}

因此，为了接收这个值，子函数必须在接受这个值的函数中。因此，使用箭头函数来接收这个值

{布局=>(
{keyboardInfo=>/*…*/}
)}

---

但在我看来，如果可能的话，使用带有钩子的上下文/提供者将是一个更好的选择。这通常只在极端情况下使用。还有另一个选项可以使用

React.cloneElement

并传递额外的道具。但是如果必须在这两者之间进行选择，则会有一些折衷。此外，还有一个称为的概念e> 渲染道具在新库中常用。

它被称为a，只是碰巧是

子类

道具。我不相信它与基于类的组件有任何关系。任何组件（函数或类）都可以从渲染道具中受益。

{layout =>{
 let extractData = fromSomeWhere;
 let calculatePosition = getPosition();
 return (<KeyboardState layout={layout}>
            {keyboardInfo => /* … */}
        </KeyboardState>)
}}