typescript 如何从对象的平面数组生成嵌套ul

b09cbbtk 于 2023-03-09 发布在 TypeScript

关注(0)|答案(2)|浏览(119)

我有一个对象数组：

const data = [
    {id: "0"},{id: "1"},{id: "2"},{id: "3"},{id: "00"},{id: "01"},{id: "02"},{id: "11"},{id: "20"},{id: "23"},{id: "000"}{id: "013"}{id: "025"}{id: "026"}{id: "110"}{id: "111"}
]

我的预期输出：

<ul>
    <li>0
        <ul>
            <li>00
                 <ul>
                      <li>000</li>
                 </ul>
            </li>
            <li>01
                 <ul>
                      <li>013</li>
                 </ul>
            </li>
            <li>02
                 <ul>
                      <li>025</li>
                      <li>026</li>
                 </ul>
            </li>
        </ul>
    </li>
    <li>1
        <ul>
            <li>11
                 <ul>
                      <li>110</li>
                      <li>111</li>
                 </ul>
            </li>
        </ul>
    </li>
    <li>2
        <ul>
            <li>20</li>
            <li>23</li>
        </ul>
    </li>
   <li>3</li>
</ul>

我的代码到目前为止：

export const NestedList = ({data, level = 1, parent = "0"}) => {
    return data
        .filter((item:any) => item.id.length === level)
        .map((item:any,i:number) => (
            <li key={i}>{item.id}{item.id.length < 3 && (
                <ul><NestedList data={data.filter((item: any) => item.id.length > level)} level={item.id.length + 1} parent={item.id.slice(0, item.id.length)} /></ul>
            )}</li>
        ));
}

尝试添加一个条件到过滤器中，比如level〉1 && item.id.slice（0，item.id.length-1）=== parent对我不起作用：（有人知道吗？）

typescript

来源：https://stackoverflow.com/questions/75604075/how-to-generate-a-nested-ul-from-a-flat-array-of-objects

2条答案

按热度按时间

z2acfund1#

在filter中，你可以添加条件来只选择那些id以父id值开始并且级别与当前级别相同的项。PS I删除了这个代码片段的类型。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

 <script type="text/babel">

const data=[{id:"0"},{id:"1"},{id:"2"},{id:"3"},{id:"00"},{id:"01"},{id:"02"},{id:"11"},{id:"20"},{id:"23"},{id:"000"},{id:"013"},{id:"025"},{id:"026"},{id:"110"},{id:"111"}];

const NestedList = ({ data, level = 1, parent = "" }) => {
  return (
<ul>
  {data
    .filter((item) => item.id.slice(0, -1) === parent && item.id.length === level)
    .map((item) => (
      <li key={item.id}>
        {item.id}
        {item.id.length < 3 && (
          <NestedList data={data} level={level + 1} parent={item.id} />
        )}
      </li>
    ))}
</ul>
  );
};

ReactDOM.render(
  <NestedList data={data} />,
  document.getElementById("root")
);
  
 </script>

赞(0）回复(0）举报 2023-03-09

62lalag42#

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

 <script type="text/babel">

const data=[{id:"0"},{id:"1"},{id:"2"},{id:"3"},{id:"00"},{id:"01"},{id:"02"},{id:"11"},{id:"20"},{id:"23"},{id:"000"},{id:"013"},{id:"025"},{id:"026"},{id:"110"},{id:"111"}];

const NestedList = ({ data, parent = "" }) => {
  return (
<ul>
  {data
    .filter((item) => item.id.length === parent.length + 1)
    .map((item) => (
      <React.Fragment key={item.id}>
      {item.id.startsWith(parent) &&
      <li key={item.id}>
        {item.id}
        {item.id.length < 3 && (
          <NestedList data={data} parent={item.id} />
        )}
      </li>}
      </React.Fragment>
    ))}
</ul>
  );
};

ReactDOM.render(
  <NestedList data={data} />,
  document.getElementById("root")
);
  
 </script>

赞(0）回复(0）举报 2023-03-09

我来回答

typescript 如何从对象的平面数组生成嵌套ul

2条答案

相关问题

热门标签

最新问答