Matvey Androsyuk's questions

我需要向页面添加文件结构，就像在代码编辑器中，我需要创建一个树结构。某个地方有错误，但我再也无法弄清楚问题出在哪里。有一个mockFiles文件，它是一系列嵌套的文件夹和文件。

const files = [
    {
        id: 1,
        title: "Работа",
        type: "Folder",
        opened: true,
        level: 0,
        fatherId: null,
        children: [
            {
                id: 2,
                title: "Оборудование",
                type: "Folder",
                opened: true,
                level: 1,
                fatherId: 1,
                children: [
                    {
                        id: 3,
                        title: "MA5600",
                        type: "Folder",
                        opened: true,
                        level: 2,
                        fatherId: 2,
                        children: [
                            {
                                id: 6,
                                title: "посмотреть",
                                type: "Folder",
                                opened: true,
                                level: 3,
                                fatherId: 3,
                                children: [
                                    {
                                        id: 7,
                                        title: "конфиг",
                                        type: "File",
                                        opened: true,
                                        level: 4,
                                        fatherId: 6,
                                        children: []
                                    },
                                    {
                                        id: 8,
                                        title: "mac-адреса",
                                        type: "File",
                                        opened: true,
                                        level: 4,
                                        fatherId: 6,
                                        children: []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: 4,
                        title: "MA5600T",
                        type: "Folder",
                        opened: true,
                        level: 2,
                        fatherId: 2,
                        children: [
                            {
                                id: 9,
                                title: "посмотреть",
                                type: "Folder",
                                opened: true,
                                level: 3,
                                fatherId: 4,
                                children: [
                                    {
                                        id: 10,
                                        title: "конфиг",
                                        type: "File",
                                        opened: true,
                                        level: 4,
                                        fatherId: 9,
                                        children: []
                                    },
                                    {
                                        id: 11,
                                        title: "mac-адреса",
                                        type: "File",
                                        opened: true,
                                        level: 4,
                                        fatherId: 9,
                                        children: []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: 5,
                        title: "C300/C300M",
                        type: "Folder",
                        opened: true,
                        level: 2,
                        fatherId: 2,
                        children: [
                            {
                                id: 12,
                                title: "посмотреть",
                                type: "Folder",
                                opened: true,
                                level: 3,
                                fatherId: 5,
                                children: [
                                    {
                                        id: 13,
                                        title: "конфиг",
                                        type: "File",
                                        opened: true,
                                        level: 4,
                                        fatherId: 12,
                                        children: []
                                    },
                                    {
                                        id: 14,
                                        title: "mac-адреса",
                                        type: "File",
                                        opened: true,
                                        level: 4,
                                        fatherId: 12,
                                        children: []
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

export default files;

我需要把这一切都画在屏幕上。为此，我有一个 FileContainer 组件，它包含整个树（为了消除混乱，我删除了类名和其他不必要的信息）：

import mockFiles from '../../../mock-objects/files'
const FileContainer = () => {
    const [files, setFiles] = useState(null);

    useEffect(()=>{
        setFiles(mockFiles)
    }, [])

    return (
        <div>
            <div>
                <div>
                    <img/>
                </div>
                <div>
               
                </div>
            </div>
            <div>
                {files?.map(file =>
                    <TreeNode key={file.id} file={file}/>
                )}
            </div>
            <div>
                <a></a>
            </div>
        </div>
    );
};

export default FileContainer;

这是 TreeNode 组件本身，它代表树中的 1 个文件夹或文件：

const TreeNode = ({file}) => {
    const [item, setItem] = React.useState(file);
    return (
        <div>
            <div>
                <div>
                    {item?.type === "Folder" &&
                        <div>
                            <img/>
                        </div>
                    }
                    {item?.type === "FILE"
                        &&
                        <div>
                            <img/>
                        </div>
                    }
                    <div>
                        {item?.title}
                    </div>
                </div>
                <div>
                    <div>
                        <img/>
                    </div>
                </div>
            </div>
            {item?.children &&
                <div>
                    {item?.children.map((child) =>
                        <TreeNode key={child.id} item={child}/>
                    )}
                </div>
            }
        </div>
    );
};

export default TreeNode;

最后一个组件的逻辑是，它以我需要的形式呈现 mockFiles 数组中的一个对象，但由于某种原因，它工作得很奇怪，结果只呈现了第一个父文件夹，以及 1 个没有文本的 svg 和一个作为子项的箭头。 为什么 mockFiles 对象中的其他所有子文件夹都没有被呈现？

我有一个 html 对象表，我需要实现搜索。它将通过匹配任何对象字段中的字符串来发生。由于我不太了解js，所以我被困在这一点上。这是我写的：

@Pipe({
  name: 'filterProducts'
})
export class FilterProductsPipe implements PipeTransform {

  transform(sensors: ISensor[], query: string): ISensor[] {
    let resultSensors: ISensor[] = []
    let sensor: ISensor = {
      id: 0, name: '', unit: '', type: '', description: '', location: '', model: '', range_from: 0, range_to: 0
    }
    const keys: string[] = Object.getOwnPropertyNames(sensor)
    for (let i = 0; i < sensors.length; i++){
      keys.forEach(key => {
        
      })
    }
    return resultSensors
  }
}

接下来，我需要检查每个字段是否包含一个字符串，如果是，然后将一个对象添加到一个新数组中，但在这里我被卡住了，因为 sensors[i][key] 给出了一个错误，并且一些字段是数字的，它们没有 includes 方法，我应该在这里做什么？

我开始了解javascrypt，我尝试连接jquery，我写了一个脚本，网络中的脚本似乎是连接的，但由于某种原因文档中的脚本不起作用。pom.xml

            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>

.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <script type="text/javascript" th:src="@{/js/3.4.1/jquery.min.js}"></script>

</head>
<body>
<div class="container-fluid">
    <h1>Andrew Tate</h1>
    <button id="myButton" class="btn btn-primary">Click me</button>
</div>
<script>
    $(document).ready(function () {
        $("myButton").on("click", function (e) {
            alert("You have clicked me");
        });
    });
</script>
</body>
</html>

项目结构：