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

Question

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

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

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

Answer 1

看到 {} 内部渲染方法用于某些 javascript 语句。

例如

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

但是现在在你的代码中 {} 中又出现了 JSX 元素，它在未命名的函数中使用。

即

{layout => (
 ...// here you can use JSX element which will be returned into render method for UI.
)}

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

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

所有这些只是在一个 JSX 元素中做一些 JS 语句 executions/operations。

Answer 2

React 组件具有 props 和 children 属性。 children属性通常是一个React节点，但也可以是returns一个React节点的函数。

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

MeasureLayout 组件已创建，因此其 children 属性被定义为函数而不是 React 节点。

And why would I want to do that exactly?

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

一些更深入的阅读：

主题：儿童的功能

https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9

https://codedaily.io/tutorials/6/Using-Functions-as-Children-and-Render-Props-in-React-Components

Answer 3

<MeasureLayout> 正在将参数作为函数传递给它的 children。并使用箭头函数接收它。

所以，基本上 <MeasureLayout> 的代码将是，

function MesauseLayout(props){
 //Do things 
 // layout = some result.
  return <div>{props.children(layout)}</div>
}

因此，为了接收此 child 必须在接受此值的函数内。因此，箭头函数用于接收此值。

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

但在我看来，如果可能的话，使用带钩子的 Context/Provider 将是更好的选择。这一般只在极端情况下使用。还有另一个选项可以使用 React.cloneElement 并传递额外的道具。但是，如果您必须在这两者之间做出选择，则需要权衡取舍。另外，有一个概念叫做render props，它在新库中很常用。

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

Can you explain this react native code (strange arrow function in render method)?

reactjs

react-native

jsx

react-props

arrow-functions