javascript - 将组件实例直接传递给 prop 还是使用渲染回调？

Question

处理父组件希望子组件呈现一些自定义 JSX 的情况的惯用和/或更有效的方法是什么？

• 渲染回调？
• 还是将组件实例直接传递给 prop？

例子:

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

<NavigationBar rightChild={rightChild} />

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

<NavigationBar renderRightChild={rightChild}>

(使用 lambda 是为了简单起见，我知道性能影响)

Answer 1

这个:

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

...不是“将 JSX 传递给 prop”。它正在传递一个组件实例。 JSX 由 const rightChild = <View /> 处理(变成了 React.createElement 调用)并且结果(一个组件实例)存储在 rightChild 中.这是正常的，尽管它通常是作为一个 child (以 children Prop 结束)而不是一个单独的命名 Prop 。但无论哪种方式，它都是一个 Prop ，所以......

据我所知，这是执行此操作的标准方法。