React를 사용하여 파일 디렉토리 표시 구성 요소 빌드

이 게시물은 무엇에 관한 것입니까?



안녕하세요 휴머노이드 여러분. 오늘 우리는 기본 파일 디렉토리 표시 구성 요소를 구현하려고 합니다. 이 게시물은 필요한 최소한의 논리보다는 스타일링에 중점을 두지 않을 것입니다.

여기에서 앱을 확인하세요.


콘텐츠


  • 파일 데이터 구조
  • 디렉터리 콘텐츠 생성 중
  • 파일 뷰어 표시

  • 각각에 대해 자세히 살펴보고 구현 방법을 살펴보겠습니다.

    파일 데이터 구조




    export class File {
      constructor(fileName, childFiles, fileType) {
        this.fileName = fileName;
        this.childFiles = childFiles;
        this.fileType = fileType;
      }
    
      fileName = "";
      childFiles = [];
      fileType = "";
    }
    


    디렉터리 콘텐츠 생성




    const COMPONENTS = [
      "first.js",
      "second.js",
      "third.js",
      "fourth.exe",
      "fifth.doc",
      "six.txt"
    ];
    
    const files = [
      new File(
        "src",
        [
          new File(
            "components",
            [...COMPONENTS].map((comp) => new File(comp, [], "file")),
            "directory"
          ),
          new File("App.js", [], "file")
        ],
        "directory"
      )
    ];
    


    파일 뷰어 표시




    const FileViewer = () => {
      console.log(files);
      return (
        <Wrapper>
          <FileViewerContainer>
            {files.map((file, index) => {
              return <FilesViewer file={file} key={index} level={0} />;
            })}
          </FileViewerContainer>
        </Wrapper>
      );
    };
    
    const FilesViewer = ({ file, level }) => {
      const { fileType, childFiles, fileName } = file;
      const [expanded, setExpanded] = useState(false);
      const onToggle = () => {
        setExpanded((ex) => !ex);
      };
      return (
        <>
          <FilesContainer paddingLeft={`${(level + 1) * 2}rem`}>
            {fileType === "directory" && (
              <IconContainer onClick={onToggle}>
                {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
              </IconContainer>
            )}
            <FileTitle>{fileName}</FileTitle>
          </FilesContainer>
          {childFiles.length > 0 &&
            expanded &&
            file.childFiles.map((childFile, index) => {
              return <FilesViewer file={childFile} key={index} level={level + 1} />;
            })}
        </>
      );
    };
    
    const IconContainer = styled.div`
      align-self: center;
      cursor: pointer;
    `;
    
    const ExpandLessIcon = styled(MdExpandLess)`
      width: 2rem;
      align-self: center;
    `;
    
    const ExpandMoreIcon = styled(MdExpandMore)`
      width: 2rem;
      align-self: center;
    `;
    
    const Wrapper = styled.div`
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    `;
    
    const FileViewerContainer = styled.div`
      width: 60vw;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      background: hsl(210deg, 30%, 8%);
      border: 1px solid hsl(210deg, 15%, 20%);
      border-radius: 1rem;
      color: #e9dd78;
      overflow-y: auto;
      justify-content: center;
    `;
    
    const FilesContainer = styled.div`
      width: fit-content;
      height: 3rem;
      padding-left: ${(props) => props?.paddingLeft ?? 0};
      display: flex;
      flex-direction: row;
    `;
    
    const FileTitle = styled.div`
      font-size: x-large;
      align-self: center;
    `;
    


    결론



    이 앱은 실제 응용 프로그램에 사용되는 새로운 구성 요소 학습의 일부로 만들어졌습니다.
    안전을 유지하고 다른 사람에게 손을 빌려주세요 :)
  • Vignesh Iyer
  • 좋은 웹페이지 즐겨찾기