Css 如何连接树中的圆

我是一个有点新的反应，我正在做一个项目，使家庭树。现在，它处于初始阶段，我只创建了树的单个节点（Person组件）。如何连接基于关系的节点？例如：如果一组人是兄弟姐妹，那么他们应该从父母那里像这样联系：

基本上，如上图所示，已婚人士之间应该是横向的，兄弟姐妹之间应该是纵向的。到目前为止，我刚刚创建了Person组件 （Person.js）：

（App.js）：

.person{
    background-color: #555;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font: 25px Helvetica, Verdana, Tahoma;
    height: 100px; 
    width: 100px;
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    margin: 25px;
}

import React from 'react'
import Person from './Person'
function App() {
  return (
    <div className="App" style={{textAlign: 'center'}}>
      <Person firstName = 'Bob' lastName = 'Vance'/>
      <Person firstName = 'Michael' lastName = 'Scott'/>
      <br></br>
      <Person firstName = 'Dwight' lastName = 'Shrute'/>
    </div>
  )
}

export default App;

从“React”导入React
从“./个人”导入个人
函数App（）{
返回(



)
}
导出默认应用程序；

我知道这是一个太宽泛的问题，无法回答，我并不是要完整的代码，我只是需要一些关于如何处理这个问题以及如何建立连接的建议。另外，如何维护树（我应该创建一个类来维护树结构还是其他方式？） 现在，结果如下（硬编码）：

---

等待反馈，下面是我看到的基本CSS想法。但是有一个bug：例如，如果我在底部添加更多的子对象，它会水平连接它们，而不是子对象应该是的方式。而父母之间的垂直联系也被搞得一团糟。您最初发送的代码有点大，我仍在试图找出如何在React中实现它。是的，有一个bug，这就是注释的原因；），你必须提前处理这件事，清点你的物品和皮卡，只为画一条垂直线；）。。。我猜你是如何从数据库或json/csv文件中获取名称的，而不是直接将其写入app.js。是吗？是的，现在我正在硬编码名称，但最终，我将从用户那里获得名称并将其存储在json文件中。你能详细说明一下如何解决垂直线问题吗？另外，我知道这是一个大问题，所以请给我一些建议，我希望孩子的关系来自上层，配偶的关系是水平的。你建议我如何实现它？不太确定如何建议，也许这会给你一些提示，即使折叠并不相似，等待反馈，这里是我看到的基本CSS想法。但是有一个bug：例如，如果我在底部添加更多的子对象，它会水平连接它们，而不是子对象应该是的方式。而父母之间的垂直联系也被搞得一团糟。您最初发送的代码有点大，我仍在试图找出如何在React中实现它。是的，有一个bug，这就是注释的原因；），你必须提前处理这件事，清点你的物品和皮卡，只为画一条垂直线；）。。。我猜你是如何从数据库或json/csv文件中获取名称的，而不是直接将其写入app.js。是吗？是的，现在我正在硬编码名称，但最终，我将从用户那里获得名称并将其存储在json文件中。你能详细说明一下如何解决垂直线问题吗？另外，我知道这是一个大问题，所以请给我一些建议，我希望孩子的关系来自上层，配偶的关系是水平的。你建议我如何实现？不太确定如何建议，也许这会给你一些提示，即使折叠不相似

import React from 'react'
import Person from './Person'
function App() {
  return (
    <div className="App" style={{textAlign: 'center'}}>
      <Person firstName = 'Bob' lastName = 'Vance'/>
      <Person firstName = 'Michael' lastName = 'Scott'/>
      <br></br>
      <Person firstName = 'Dwight' lastName = 'Shrute'/>
    </div>
  )
}

export default App;