通过const或JSX调用组件

Question

是否有一种首选的方法来调用React中的组件？例如，将其设置为常量与在jsx中调用它相比？

function getAnimalGalleryPicture() {
... return <LionPicture/>
... return <FishPicture/>
... return <DogPicture/>
}
const animalGalleryPicture = getAnimalGalleryPicture();
return <>{animalGalleryPicture}</>;

vs：

return <>{getAnimalGalleryPicture()}</>;

Answer 1

一个比两者都好的选项是将返回组件的函数变成组件本身。

function AnimalGalleryPicture() {
if (condition) return <LionPicture/>;
if (condition2) return <FishPicture/>;
return <DogPicture/>;
}

然后你就做

<AnimalGalleryPicture />

将其作为一个组件调用，而不是像任何旧函数那样。

Answer 2

JSX可以分配给变量并像变量一样传递。

const things = (<>
<LionPicture/>
<FishPicture/>
<DogPicture/>
</>)
// ...
return <>{things}</>

然而，对于如此简单的东西，你通常会内联它。如果你需要在多个地方调用它，或者使用不同的参数，你只需要像这样把东西分开。在这种情况下，您通常还会声明一个包含该内容的新组件，而不是一个返回该内容的方法

返回JSX的函数本身就是一个组件——您只需要将其命名为组件，然后将该函数从渲染中提升出来，使其成为顶级函数。因此，不要使用getAnimalGalleryPicture，而是使用

const AnimalGalleryPicture = () => <>
<LionPicture/>
<FishPicture/>
<DogPicture/>
</>

然后在需要的地方使用该组件。

<AnimalGalleryPicture />

这样做更可取——在顶级定义的组件比嵌套在组件内部然后调用的函数更具性能。