0
367
Vistas¿Cómo renderizo carpetas dentro de una carpeta en un componente en React (Next.js)?
No soy bueno en inglés, así que por favor sea comprensivo.
Primero, por favor revisa mi código.
const DriveFile = ({folderPk}) => { const [rootFolder, setRootFolder] = useState([]) const viewFolder = async () => { const url = `/api/store/drive/view-folder?folderId=${folderPk}` await get(url) .then((res) => { setRootFolder(res.directChildrenFolders); }) .catch((error) => { console.log(error) }) }; useEffect(() => { viewFolder() }, [folderPk]); const [folderName, setFolderName] = useState(''); const folderNameChange = (e) => { setFolderName(e.target.value) } const createFolder = () => { const url = '/api/store/drive/create-folder'; const data = { folderName: folderName, parentPK: folderPk } if (folderName.length == 0) { alert('please write the folder name'); return; } post(url, data) .then((res) => { console.log('파일 생성', res) setFolderName(''); }) .catch((error) => { console.log(error) }) }; return ( <div className={styles.fileDiv}> <input value={folderName} onChange={folderNameChange}/><button onClick={createFolder}>ADD FOLDER</button> { rootFolder?.map((root) => ( <div>{root.FOLDER_NAME}</div> )) } </div> ) } export default DriveFileAquí. este es mi componente.
Los accesorios, {folderPk}, son solo un número que seleccioné de la carpeta raíz superior y luego uso la solicitud GET usando folderPk para representar las carpetas secundarias directas.
FYI, esta es la interfaz de usuario.
Entonces, cuando hago clic en 'FOLDER 1', obtengo el FOLDER_PK específico. Luego, lo uso en diferentes componentes para representar subcarpetas como esa.
Sin embargo, mi pregunta es ¿cómo puedo ingresar a una carpeta dentro de una carpeta en un componente?
Por ejemplo, estoy tratando de ir a otra carpeta cuando hago clic en la carpeta 'CARPETA 4, BAJO CARPETA 1'. Me pregunto si puede ser posible.
¿Es posible en un componente? o debo usar un método diferente?
Su respuesta será muy apreciada !!!!! :)
1 Respuestas
Responde la pregunta0
Debe separar el código en componentes.
Como consejo general: "No tenga miedo de dividir los componentes en componentes más pequeños"
Utilice un componente que conozca el estado (que es la carpeta actual y sus subcarpetas) y otros componentes que muestren las carpetas (según los accesorios) y proporcionen botones (con devoluciones de llamada).
Aquí un ejemplo vago, solo para ilustrar la idea básica (encontrará una estructura de componentes más apropiada para su caso):
const Folders = (props) => { // (maybe your DriveFile of even another component would hold the state instead, or part of it) const [ currentFolderPk, setCurrentFolderPk ] = useState(0); const [ currentSubFolders, setCurrentSubFolders ] = useState([]); // ... return ( <div className={styles.fileDiv}> <NewFolderInput onConfirm={ createFolder } /> { currentSubFolders.map(( folder ) => ( <Folder folderPk={ folder.folderPk } folderName={ folder.FOLDER_NAME } gotoFolderPk={ setCurrentFolderPk } /> )) } </div> ) } const Folder = ({ folderName, folderPk, gotoFolderPk }) => { return ( <div> { folderName } <button onClick={ () => gotoFolderPk( folderPk ) }> go to folder </button> </div> ) }Incluso los componentes muy pequeños a menudo tienen sentido:
const NewFolderInput = ({ folderName, folderNameChange, createFolder }) => { return ( <input value={folderName} onChange={folderNameChange} /> <button onClick={createFolder}>ADD FOLDER</button> ); }Ahora no estoy seguro de dónde colocaría el estado y las solicitudes de API, lo decidiría mientras trabajaba en ello. Probablemente en algún lugar de un componente adicional entre my y lo que sea que sea el padre de your.
También sugiero tomar muy en serio la nomenclatura de variables . Probablemente se sorprenderá de lo mucho que eso ayuda a veces.
Por ejemplo, el nombre de su variable de estado rootFolder podría no estar mal, tiene sentido, pero intente cambiarle el nombre a algo como listOfSubfolders (o directChildrenFolders como ya usó), y tal vez el código mágicamente parezca haberse vuelto un poco más simple.