ReactJS-目录选择对话框不起作用

Question

我想要在我的 React 应用程序中有一个目录选择对话框。我遵循了这个可能对某些人有效但对我无效的线索。获取编译时错误为

类型“DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>”上不存在属性“directory”。

我将 React 升级到最新的 RC 版本 17.rc.1，认为可能有一个错误修复，但没有成功。

编辑

@Scratch'N'Purr 在评论中建议，有一个技巧可以使用标签在文件末尾添加此脚本以进行目录选择。

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    directory?: string;
    webkitdirectory?:string;
  }
}

Answer 1

它在 Javascript 中工作正常，但问题在于 Typescript。我想，你认为这是一个问题是正确的。

不过，您可以使用手动设置它ref。

import * as React from "react";
import "./styles.css";

export default function App() {
  const ref = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (ref.current !== null) {
      ref.current.setAttribute("directory", "");
      ref.current.setAttribute("webkitdirectory", "");
    }
  }, [ref]);

  return <input type="file" ref={ref} />;
}