React를 사용하여 파일 디렉토리 표시 구성 요소 빌드
3606 단어 reacthtmljavascriptcss
이 게시물은 무엇에 관한 것입니까?
안녕하세요 휴머노이드 여러분. 오늘 우리는 기본 파일 디렉토리 표시 구성 요소를 구현하려고 합니다. 이 게시물은 필요한 최소한의 논리보다는 스타일링에 중점을 두지 않을 것입니다.
여기에서 앱을 확인하세요.
콘텐츠
각각에 대해 자세히 살펴보고 구현 방법을 살펴보겠습니다.
파일 데이터 구조
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;
`;
결론
이 앱은 실제 응용 프로그램에 사용되는 새로운 구성 요소 학습의 일부로 만들어졌습니다.
안전을 유지하고 다른 사람에게 손을 빌려주세요 :)
Reference
이 문제에 관하여(React를 사용하여 파일 디렉토리 표시 구성 요소 빌드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/vigneshiyergithub/building-a-file-directory-display-component-using-react-2ong텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)