Передать экземпляр компонента непосредственно в prop или использовать обратный вызов рендеринга?

Question

Каким был бы идиоматический и / или более эффективный способ обработки ситуации, когда родительский компонент хочет, чтобы дочерний элемент отобразил какой-то пользовательский JSX?

• обратный вызов рендеринга?
• или передать экземпляр компонента непосредственно в реквизит?

Пример:

// Option 1
// -
const rightChild = <View />

<NavigationBar rightChild={rightChild} />

// Option 2
// -
const renderRightChild = () => <View />

<NavigationBar renderRightChild={rightChild}>

(лямбды используются для простоты, я знаю о влиянии на производительность)

Answer 1

В любом случае будет работать.Случай, когда вы действительно хотите использовать реквизит рендеринга, - это когда вам понадобятся реквизиты, переданные из NavigationBar, чтобы визуализировать компонент или фрагмент.Преимущество передачи компонента состоит в том, что вы не будете передавать новую функцию, которая будет отображаться каждый раз.С точки зрения производительности было бы немного проще получить его без повторного рендеринга.

Answer 2

Это:

const rightChild = <View />
// ...
<NavigationBar rightChild={rightChild} />

... не означает "пропуск JSX в опору".Он передает экземпляр компонента.JSX обрабатывается с помощью const rightChild = <View /> (превращается в вызов React.createElement), а результат (экземпляр компонента) сохраняется в rightChild.Это нормально, хотя обычно это ребенок (заканчивающийся на children опору), а не отдельный названный опора.Но в любом случае, это опора, так что ...

Насколько я знаю, это был бы стандартный способ сделать это.