reactjs - 你能解释一下这个 react 原生代码(渲染方法中的奇怪箭头函数)吗？

Question

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

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

我不明白 {layout => (... 发生了什么.所以我认为 layout 是一个箭头函数，它返回这个keyboardState 组件。那么在这部分 <KeyboardState layout={layout}> 中，layout 如何将自身传递到keyboardState 的layout prop 中？ ?我为什么要这样做呢？这里的整个部分真的让我感到困惑。

Answer 1

React 组件有 props和 children特性。 children property 通常是一个 React 节点，但它也可以是一个返回 React 节点的函数。

So how does layout then pass itself into keyboardState's layout prop at this part ?

MeasureLayout组件被创建以便它的 children property 被定义为一个函数而不是一个 React 节点。

And why would I want to do that exactly?

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

一些更深入的阅读:
主题:作为 child 的功能
https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9
https://codedaily.io/tutorials/6/Using-Functions-as-Children-and-Render-Props-in-React-Components