问题描述
我对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;
我知道这是一个悬而未决的问题,我并不需要完整的代码,我只需要一些有关如何实现此方法以及如何进行连接的建议。另外,如何维护树(我应该创建一个维护树结构或其他方式的类吗?) 现在,结果看起来像这样(硬编码):
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)