如何在树中反应连接圆圈

如何解决如何在树中反应连接圆圈

我对React还是有点陌生，我正在做一个制作家谱的项目。现在，它还处于初期阶段，我只设法创建了树的单个节点（人事组件）。如何连接基于节点的关系？例如：如果一群人是兄弟姐妹，则应该这样从父母那里进行连接：

基本上，已婚人士应从上水平连接，兄弟姐妹如上图所示。到目前为止，我刚刚创建了Person组件（ Person.js ）：

import React from "react";
import "./Person.css";
function Person(props)
{
    return(
        <div class="person">
           {`${props.firstName}`}
       </div>
    )
}

export default Person;

（Person.css）：

.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;
}

（App.js）：

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;

我知道这是一个悬而未决的问题，我并不需要完整的代码，我只需要一些有关如何实现此方法以及如何进行连接的建议。另外，如何维护树（我应该创建一个维护树结构或其他方式的类吗？）现在，结果看起来像这样（硬编码）：