将功能组件作为渲染道具的参数传递

Question

我最近意识到我可以将函数传递给可以使用jsx渲染的渲染道具。

示例：

setValue()

通常我会这样做：

<MessagesComponent
  renderMessages={(eventName, Messages) => (
    <>
      <h1>{eventName}</h1> // eventName: string
      <Messages />  // Messages: Function/React Component (that can be rendered using jsx)
    </>
      )}>
  <h2>{'Loading...'}</h2>
</MessagesComponent>

上面的示例让MessagesComponent决定如何呈现消息。

以上示例是否被视为不良做法？ 这种方法有什么问题吗？表现还是如此？

Answer 1

这与React's official Render Props非常接近，因此您可能希望像这样完全实现它，但是不，这不是一个坏习惯。