Блог

Итак, это некоторый собственный код React из учебника, который я просматриваю, в частности, из метода рендеринга App.js . Конечно, /* …*/ будет заполнен фактическим кодом, но это не имеет отношения к моему вопросу.

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

Чего я не понимаю, так это того, что происходит с. {layout => (... Итак, я полагаю, что layout — это функция со стрелкой, которая возвращает этот компонент KeyboardState. Итак, как макет затем передается в макет KeyboardState в этой части <KeyboardState layout={layout}> ? И почему я должен хотеть сделать именно это? Вся эта часть здесь действительно сбивает меня с толку.

Компоненты React имеют props children свойства и . children Свойство обычно представляет собой узел React, но оно также может быть функцией, которая возвращает узел React.

Итак, как макет затем передается в макет KeyboardState в этой части?

MeasureLayout Компонент был создан так, что его children свойство было определено как функция, а не как узел React.

И почему я должен хотеть сделать именно это?

Для внедрения зависимостей и в качестве шаблона, который позволяет использовать более декларативный стиль программирования с компонентами на основе классов.

Еще немного углубленного чтения:

Тема: Функции как дочерние элементы

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

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

Посмотрите, что {} метод inside render используется для некоторых операторов 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>)
}}
 

Все это заключалось в том, чтобы просто выполнить несколько операций / операций с JS-операторами внутри одного элемента JSX.

Он <MeasureLayout> передает аргумент своим дочерним элементам как функцию. и для его получения используется функция стрелки.

итак, в основном код <MeasureLayout> будет,

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

Итак, чтобы получить это, дочерний элемент должен быть внутри функции, которая принимает это значение. Итак, для получения этого значения используется функция со стрелкой.

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

Но, на мой взгляд, использование контекста / провайдера с хуком будет лучшим вариантом, если это возможно. Обычно это используется только в крайних случаях. Существует также другой вариант использования React.cloneElement и передачи дополнительных реквизитов. Но есть компромиссы, если вам нужно выбирать между этими двумя. Кроме того, существует концепция, render props которая обычно используется в новых библиотеках.