请访问Reddit.com:
在React中，只有一个子组件的组件链很深，这是一种非常常见的模式。
选项
a. VSCode样式
在Java项目树中也会遇到此问题。
VSCode的执行方式如下：
https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#compact-folders-in-explorer
IntelliJ相似。
也许我们可以像VSCode那样做？
B.单个子级不缩进
另一种方法是在只有一个子进程时不缩进。
h
Context.Provider - {props: {foo: 1}}
I
Context.Provider
E
Context.Provider
Context.Provider
Context.Provider
l
- Context.Provider (2 children - collapse all)
mg
d
Context.Provider
+ Component (1 child - expand all)
vg
hg
Context.Provider
+ hg (1 child - expand all)我们还可以指出何时有多个子节点，并提供一些控件来折叠所有子节点的子节点，这对#16463有帮助。
优点：作为另一个特性，我还希望在每个组件的右侧添加一些内联注解，以显示一些属性，从而更好地识别组件。水平移动这些嵌套的树将阻止这种功能，因此这种方法效果更好。
设计决策：在哪里放置箭头来切换折叠？在第一个有多个子元素的元素上（如上所示）？或者在顶部。或者我们可以创建一个非常高的按钮来显示。
设计决策：如何清晰直观地区分组件是嵌套的还是同级的。也许我们需要添加一个额外的空间（如上面的例子所示）。也许还有颜色编码。或者交替的灰色阴影。
1条答案
按热度按时间zysjyyx41#
嘿！谢谢你的建议！我认为他们绝对有潜力，我有一些初步的想法：
a.这似乎是一个有趣的解决方案。它将使导航树变得更容易，并可能有助于计算父级有多少个子级。React DevTools和VSCode/IntelliJ之间的一个区别是，React可以有任意长的链（相对于通常只有这么深的文件结构）。而且，React组件往往具有信息，因此我们必须找出开发人员能够访问它的最佳方式（尽管这应该不是很难）。
B.这也是一个有趣的解决方案。我们需要一种方法来表示一个组件是父组件的兄弟组件还是单个子组件。
总的来说，这是一个非常有趣的想法，虽然，我们很乐意进一步考虑这一点！