画React组件树结构图

写下组件嵌套关系，3 分钟拿到一张组件树结构图。根据React组件名及父子嵌套关系，生成清晰层级结构图；不提供代码实现、不校验语法正确性，仅作可视化示意。

能拿到什么

• 推荐：一张排好版的React组件树结构图 PNG，带箭头连接和层级配色（横版16:9，浅色底，方框节点用箭头连成树，层级分明），约 3 分钟
• 旗舰：组件树结构图 PNG、带Props标注版、深色/浅色双版本

要你点选的几项

画面主体、用在哪、参考图(选填)、风格、色调、画面比例、要几版/要什么变体。多数点一下就行，没选的按常见情况替你定，交付时说清哪几项是按默认的。

怎么办

1. 写下组件名和嵌套关系
2. 选风格、色调和比例
3. 生成结构图并下载 PNG

别人还这样说

• 帮我把这几个组件画成树状图
• 我们组件嵌套太乱了，能出个图理清楚吗
• List包着Item，Item又用了Button，怎么画层级？