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

Question

我英语不好，请谅解。

首先，请检查我的代码。

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”文件夹时，我正在尝试将 go 放入另一个文件夹。 我想知道这是否可能。

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

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

Answer 1

您应该将代码分成组件。

作为一般建议： “不要害怕将组件拆分为更小的组件”

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

这是一个模糊的示例，只是为了说明基本思想（您会找到更适合您的案例的组件结构）：

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

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

另外我建议非常重视命名变量。 您可能会惊讶于有时这有多大帮助。

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