如何在 React(Next.js) 中的一个组件的文件夹中呈现文件夹？答案

【问题标题】：How do I render folders within a folder in one component in React(Next.js)?如何在 React(Next.js) 中的一个组件的文件夹中呈现文件夹？
【发布时间】：2022-01-13 08:58:59
【问题描述】：

我英文不好，请谅解。

首先，请检查我的代码。


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 DriveFile

这里。这是我的组件。

道具 {folderPk} 只是我从顶部根文件夹中选择的一个数字，然后我使用 GET 请求使用 folderPk 来呈现直接子文件夹。

仅供参考，这是用户界面。

所以，当我点击“FOLDER 1”时，我会得到特定的 FOLDER_PK。然后，我在不同的组件中使用它来呈现这样的子文件夹。

但是，我的问题是如何进入组件文件夹中的文件夹。

例如，当我单击“FOLDER 4，UNDER FOLDER 1”文件夹时，我试图进入另一个文件夹。我想知道这是否可能。

是否可以在一个组件中实现？还是我应该使用不同的方法？

您的回答将不胜感激！！！！！！！ :)

【问题讨论】：

标签： javascript reactjs get next.js components

【解决方案1】：

您应该将代码分成组件。

一般建议："Don’t be afraid to split components into smaller components"

使用一个知道状态的组件（即当前文件夹及其子文件夹），以及其他知道状态的组件显示文件夹（基于道具），并提供按钮（带有回调）。

这里是一个模糊的例子，只是为了说明基本思想（你会找到更适合你的情况的组件结构）：

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>
    )
}

即使是非常小的组件通常也有意义：

const NewFolderInput = ({ folderName, folderNameChange, createFolder }) => {
    return (
        <input value={folderName} onChange={folderNameChange} />
        <button onClick={createFolder}>ADD FOLDER</button>
    );    
}

我现在不确定将状态和 API 请求放在哪里，我会在处理它时决定。可能在 my 和你的父级之间的一个额外组件中的某个地方。

我还建议非常认真地对待命名变量。有时您可能会惊讶于这有多大帮助。

例如您的状态变量 rootFolder 的名称可能没有错，但尝试将其重命名为 listOfSubfolders（或您已经使用过的 directChildrenFolders）之类的名称，也许代码会神奇地变得相当简单一点。

【讨论】：