Javascript React-有条件地渲染较大的组件还是较小的子组件更好

如果组件树中的多个组件应基于某些共享数据（当前用户、暗模式或亮模式）进行不同的渲染，那么创建不同的有条件渲染的更高级别大型组件是否更好？还是让较低级别的小组件有条件地渲染更好

例如，假设我有一个

组件，它由许多较小的组件组成，如

当配置文件的当前用户登录时，应使用如下编辑按钮进行渲染：

有条件地渲染两个不同的配置文件部分是否更好？

{isAuth？：}

或者最好使用react context呈现一个
，并有条件地呈现其子级

例：

{isAuth&&}

{isAuth？：}

感觉第二种方法更正确，因为如果您有两个不同的更高级别组件，如果您对其中一个组件进行更改，它们可能会失去同步。我想我刚刚回答了我的问题。。。我想无论如何我都会发布这篇文章，因为它可能会帮助某些人。
我同意第二种方法，因为复制整个组件进行一些更改感觉像是浪费。我认为一个好的起点是。试着更抽象地思考您的UI，以及可视化地显示（或不显示）部分UI意味着什么。在本例中，
edit
prop似乎足以有条件地呈现一些额外的UI元素，如“编辑配置文件”和“编辑图像”按钮，因为它们抽象地表示了这些元素。最终，你希望你的代码（以及你的组件）尽可能的干涸。我同意第二种方法，因为复制一个完整的组件来做一些更改感觉像是浪费。我认为一个好的开始是。试着更抽象地思考您的UI，以及可视化地显示（或不显示）部分UI意味着什么。在本例中，
edit
prop似乎足以有条件地呈现一些额外的UI元素，如“编辑配置文件”和“编辑图像”按钮，因为它们抽象地表示了这些元素。最终，您希望您的代码（以及扩展后的组件）尽可能干燥。