主页 / 问题 / 1538526
Accepted
Meth0d
Asked:2023-08-31 22:35:46 +0000 UTC2023-08-31 22:35:46 +0000 UTC

将一维用户数组放入组织结构图中

  • 772

我有一个一维视图实体数组

[
  {
    id: number
    parentId: number
    type: string
    name: string
  }
]

我想把它分解成React中的组织结构，所以 因此，parentId 与标记中另一个元素的 id 匹配的元素将成为其后代。该结构的最大深度为 4。我尝试在字段中的每个元素中使用嵌套数组进行布局children- 原则上，一切正常，但我们有复杂性n^4。结构最终应该是这样的：

<div id="1" class="wrapper">
    <div class="item"></div>
    <div class="row">
        <div id="2" parent-id="1" class="wrapper">
            <div class="item"></div>
        </div>
        <div id="3" parent-id="1" class="wrapper">
            <div class="item"></div>
            <div class="row">
                <div id="4" parent-id="3" class="wrapper">
                    <div class="item"></div>
                </div>
            </div>
        </div>
    </div>
</div>

数组示例：

[
  {
    "id": 1,
    "parentId": 0,
    "type": "main",
    "name": "Генеральный директор"
  },
  {
    "id": 2,
    "parentId": 1,
    "type": "section",
    "name": "Отдел найма"
  },
  {
    "id": 3,
    "parentId": 1,
    "type": "section",
    "name": "Отдел обучения"
  },
  {
    "id": 4,
    "parentId": 1,
    "type": "section",
    "name": "Отдел создания контента"
  },
  {
    "id": 5,
    "parentId": 3,
    "type": "section",
    "name": "Отдел создания контента"
  },
  {
    "id": 6,
    "parentId": 5,
    "type": "section",
    "name": "Отдел создания контента"
  }
]

javascript

1 个回答

  1. Best Answer

    结构最终应该是这样的：

    我会建议这个选项...

    //
function Row({id = 0}) {
  if (!arr.some(o => o.parentId === id)) return null
  return <div className="row">
    <App id={id} />
  </div>
}
//
function App({id = 0}) {
  return <React.Fragment>
    {arr.filter(o => o.parentId === id).map(o => {
      if (id) return <div key={o.id} id={o.id} parent-id={id} className="wrapper">
        <div className="item">{o.name}</div>
        <Row id={o.id} />
      </div>
      return <div key={o.id} id={o.id} className="wrapper">
        <div className="item">{o.name}</div>
        <Row id={o.id} />
      </div>
    })}
  </React.Fragment>
}
const arr = [
  {
    "id": 1,
    "parentId": 0,
    "type": "main",
    "name": "Генеральный директор"
  },
  {
    "id": 2,
    "parentId": 1,
    "type": "section",
    "name": "Отдел найма"
  },
  {
    "id": 3,
    "parentId": 1,
    "type": "section",
    "name": "Отдел обучения"
  },
  {
    "id": 4,
    "parentId": 1,
    "type": "section",
    "name": "Отдел создания контента 1"
  },
  {
    "id": 5,
    "parentId": 3,
    "type": "section",
    "name": "Отдел создания контента 3"
  },
  {
    "id": 6,
    "parentId": 5,
    "type": "section",
    "name": "Отдел создания контента 5"
  }
]
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
    .row {
  margin-left: 20px;
}
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

    • 1

相关问题