Início / coding / Perguntas / 79308793
Accepted
Matvey Androsyuk
Asked: 2024-12-26 14:17:10 +0800 CST

Como renderizar meus componentes em uma estrutura de árvore, como estrutura de arquivo padrão no IDE usando React

  • 772

Eu tenho um componente chamado TreeNode, que é um arquivo na minha estrutura de árvore.

import React from "react";
import classes from "./TreeNode.module.css"

function TreeNode({children, title}){
    return(
        <div>
            <div className={classes.treeNode}>
                <div className={classes.treeNodeType}>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="#3B4045" x="0px" y="0px" width="20" height="20" viewBox="0 0 20 20">
                        <path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z"></path>
                    </svg>
                </div>
                <div className={classes.treeNodeTitle}>
                    {title}
                </div>
            </div>
        </div>
    )
}

export default TreeNode;

E eu tenho um arquivo que contém objetos fictícios de arquivo que eu quero desenhar na minha página como uma árvore.

const files = [
    {
        id: 232141332,
        title: "Оборудование",
        type: "FOALDER",
        opened: false,
        level: 0,
        fatherId: null,
        children: [
            {
                id: 734573086,
                title: "MA5600",
                type: "FOALDER",
                opened: false,
                level: 1,
                fatherId: 232141332,
                children: [
                    {
                        id: 867407333,
                        title: "Удаление платы",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 734573086,
                        children: []
                    },
                    {
                        id: 110345245,
                        title: "Добавление платы",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 734573086,
                        children: []
                    }
                ]
            },
            {
                id: 222225454,
                title: "C300M",
                type: "FOALDER",
                opened: false,
                level: 1,
                fatherId: 232141332,
                children: [
                    {
                        id: 333334256,
                        title: "Не найдена опция TR-82",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 222225454,
                        children: []
                    }
                ]
            }
        ]
    }
]

export default files;

Como escrever meu arquivo Main.jsx para renderizar todos esses arquivos.

import files from "../../mock/files";
import "../../styles/Main.css"
import TreeNode from "../treenode/TreeNode";

function Main() {
    return (
      <div className="wrapper">
        <div className="tree">
            {
                files.map((file) => {
                    //code
                })
            }
        </div>
      </div>
    );
  }
  
  export default Main;

Talvez eu precise refatorar algum código, não sei, mas no segundo dia não consigo fazer isso.

javascript

2 respostas

  1. Best Answer

    Basta usar a recursão. Semelhante a esta pergunta do stackoverflow .

    Ajustei um pouco seu componente, mas espero que você entenda a ideia geral.

    const files = [
  {
    id: 232141332,
    title: "Оборудование",
    type: "FOALDER",
    opened: false,
    level: 0,
    fatherId: null,
    children: [
      {
        id: 734573086,
        title: "MA5600",
        type: "FOALDER",
        opened: false,
        level: 1,
        fatherId: 232141332,
        children: [
          {
            id: 867407333,
            title: "Удаление платы",
            type: "FILE",
            opened: false,
            level: 2,
            fatherId: 734573086,
            children: [],
          },
          {
            id: 110345245,
            title: "Добавление платы",
            type: "FILE",
            opened: false,
            level: 2,
            fatherId: 734573086,
            children: [],
          },
        ],
      },
      {
        id: 222225454,
        title: "C300M",
        type: "FOALDER",
        opened: false,
        level: 1,
        fatherId: 232141332,
        children: [
          {
            id: 333334256,
            title: "Не найдена опция TR-82",
            type: "FILE",
            opened: false,
            level: 2,
            fatherId: 222225454,
            children: [],
          },
        ],
      },
    ],
  },
];

const classes = {/* dummy to prevent runtime errors*/};

function TreeNode({ item }) {
  return (
    <div className={classes.treeNode}>
      <div className={classes.treeNodeType}>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="#3B4045"
          x="0px"
          y="0px"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z"></path>
        </svg>
      </div>
      <div className={classes.treeNodeTitle}>{item.title}</div>
      <div>
        {item.children?.map((x) => (
          <TreeNode key={x.id} item={x} />
        ))}
      </div>
    </div>
  );
}

const App = () => {
  return (
    <div>
      {files.map((x) => (
        <TreeNode key={x.id} item={x} />
      ))}
    </div>
  );
};

ReactDOM.render(<App/>, document.getElementById('app'));
    <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="app"/>

    • 4
    1. Você precisa usar a função Recursionin TreeNode.
    2. No <App />componente, passe os arquivos [ parent object ]do <TreeNode />componente como parâmetros.
    3. No <TreeNode />componente passe Childrens [ child object ]no <TreeNode />componente como parâmetros.
    4. <TreeNode />estilo do conjunto de componentes margin-leftconforme o valor do nível para exibir pastas e arquivos como pastas ou visualização em árvore.

    const data = [
  {
    id: 232141332,
    title: "Оборудование",
    type: "FOLDER",
    opened: false,
    level: 0,
    fatherId: null,
    children: [
      {
        id: 734573086,
        title: "MA5600",
        type: "FOLDER",
        opened: false,
        level: 1,
        fatherId: 232141332,
        children: [
          {
            id: 867407333,
            title: "Удаление платы",
            type: "FILE",
            opened: false,
            level: 2,
            fatherId: 734573086,
            children: [],
          },
          {
            id: 110345245,
            title: "Добавление платы",
            type: "FILE",
            opened: false,
            level: 2,
            fatherId: 734573086,
            children: [],
          },
        ],
      },
      {
        id: 222225454,
        title: "C300M",
        type: "FOLDER",
        opened: false,
        level: 1,
        fatherId: 232141332,
        children: [
          {
            id: 333334256,
            title: "Не найдена опция TR-82",
            type: "FILE",
            opened: false,
            level: 2,
            fatherId: 222225454,
            children: [],
          },
        ],
      },
    ],
  },
];

function TreeNode({ files }) {
  return (
    <div style={{ margin: 10, marginLeft: files.level > 0 ? ( files.level + 1 ) * 10 : 10 }}>
      <i className={"fa-regular " + (files.type === "FOLDER" ? "fa-folder" : "fa-file")}></i>
      <span style={{ marginLeft: 10 }}>{files.title}</span>

      {files.children.map((file, index) => (
        <TreeNode key={index} files={file} />
      ))}
    </div>
  );
}

function App() {
  return data.map((file, index) => <TreeNode key={index} files={file} />);
}

ReactDOM.render(<App />, document.getElementById("root"));
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

    • 0

relate perguntas