Question

我正在尝试设计一种数据结构来存储一个单独的父系家谱，以便在react位置：

每个家庭成员可以生育零个或多个孩子
族谱的深度不应有限制。

为此，我正在使用一个按钮，然后单击应该添加的那个孩子。但是我怀疑我的方法正确吗？有没有更好的办法做到这一点。欢迎提出所有建议。

class App extends Component {
  state =  {
    users: [{
      name: "",
      favouriteColor: ""
    }]
  }

  onSubmit = e => { /* submit form logic */ }

  render(){

    return (
      <div>
        <button onClick={}> Root ( click here to add children ) </button>
      </div>
    );
  }
}

Answer 1

我建议您以react-treebeard作为起点。正是为此目的而构建的。它遵循以下结构，但是，您当然可以根据需要添加其他属性-它相当可扩展：

{
  "name": "family",
  "children": [{
    "name": "member",
    "children": []
  }]
}

在您的状态下使用该结构，并构建一个按钮，该按钮可根据需要的深度将子级添加到适当的children数组中。我已经将此组件用于深度为5的树木。

该回购上的有效演示链接已断开，但可以找到它here

数据结构以在反应中存储单亲家庭树

1 个答案: