主页 / user-30266210

user30266210's questions

Martin Hope
user30266210
Asked: 2025-04-28 16:06:42 +0800 CST
  • 6

我有一个通用的 DialogueWindow 组件：

function DialogueWindow({elements}) {

  return (

    <div className="backdrop">

      <dialog className="dialogue-window">

        {elements}

      </dialog>

    </div>
  )
}

export default DialogueWindow

它内部会显示所有传递给它的元素。目前我传递了一个 FileUploader 元素，它有一个“取消”按钮，用户可以用它来关闭对话框。

在 App.js 中：

<DialogueWindow
     elements={
        <FileUploader/>
     }
/>

在 FileUploader 中：

function FileUploader() {

  ...

  return (

    <div className="file-uploader">

        ...

        <div className="file-uploader-button-container">

            <button>
                Upload
            </button>

            <button>
                Cancel
            </button>

        </div>

    </div>
  )
}

export default FileUploader

我见过在标准 JavaScript 中调用 document.getElementById() 来获取对话框元素，然后对其调用 close() 方法。但这在 React 中是如何实现的呢？

javascript
Martin Hope
user30266210
Asked: 2025-04-14 18:24:21 +0800 CST
  • 4

我正在开发一个带有内置文件管理器的 React 页面。我有一个DocumentTable.js组件，负责显示当前可用的文件列表，并且它(除其他功能外)具有以下三个相互调用的函数：

const getParamPath = useCallback((path, operation, currentFolderPath, fileName) => {

    const paramPath = (

        path +
        "/?operation=" + operation +
        ((fileName === undefined) ? "" : ("&fileName=" + currentFolderPath + fileName))
    )

    return paramPath
},
    []
)

const getAllFiles = useCallback((path, currentFolderPath, fileName) => {

    const setData = (fileData) => {

        const newFolderPath = fileName === undefined ? currentFolderPath : (currentFolderPath + fileName + "/")

        fileDataSetter(fileData)
        folderPathSetter(newFolderPath)
    }

    dataGetter(getParamPath(path, "0", currentFolderPath, fileName), setData)
},
    [dataGetter, getParamPath, fileDataSetter, folderPathSetter]
)

useEffect(() => {

    getAllFiles(path, currentFolderPath)
},
    [getAllFiles, path]
)

它首先使用和从父组件继承的变量useEffect()进行加载。它是调用 的函数之一，该函数向后端 API 发送请求，以获取起始文件夹中可用的文档列表。它使用同样从父组件（、、）继承的各种函数来完成此操作，并且还调用三个函数中的最后一个，即使用查询参数为后端 API 构建路径字符串的函数。它不仅在需要时具有 ，而且还具有一个变量，该变量将告诉后端需要做什么（0 - 显示所有内容，1 - 下载文件，2 - 重命名文件，3 - 删除文件等）。pathcurrentFolderPathgetAllFiles()dataGetterfileDataSetterfolderPathSettergetParamPath()fileNameoperation

如果用户点击一个文件，该文件就会下载到他们的电脑上。但是，如果他们点击一个文件夹，该currentFolderPath变量（最初为空字符串）就会更新为包含fileName和/smybol，然后由于 useEffect 的作用，页面会重新渲染该文件夹中的文件列表。

但所有这些对于我的问题来说并不是非常重要，因为编译器由于 useEffect 依赖关系不断抛出警告，即：

React Hook useEffect 缺少依赖项“currentFolderPath”。请添加它或移除依赖项数组 react-hooks/exhaustive-deps。

然而问题是，如果没有这个警告，程序现在就可以按预期完美运行，而如果我删除依赖数组，显然 useEffect 会在我打开页面时被无限调用，而另一方面，如果我将其包含currentFolderPath在数组中，useEffect 会在起始文件夹中不断重新渲染，最终导致越来越多的后端错误。

我的问题是，如何在不影响程序功能的情况下清除这个警告？这是我收到的第一个警告，如果我想要一个可以正常运行的程序，它似乎应该永远被忽略。我是不是做错了什么？

reactjs