无法在打字稿中使用 @emoji-mart/react 中的 Picker

Question

我在 tsx 中有以下用于表情符号选择器的 React 组件。我收到错误并且无法解决此问题。

JSX 元素类型“Picker”没有任何构造或调用签名.ts(2604) “Picker”不能用作 JSX 组件。

其类型 'typeof import("@emoji-mart/react", { with: { "resolution-mode": "import" } })' 不是有效的 JSX 元素类型.ts(2786)

    import data from "@emoji-mart/data";
    import Picker from "@emoji-mart/react";
    import { SetStateAction, useState } from "react";
    import { FaRegSmile } from "react-icons/fa";
    import { useTheme } from "../../../Contexts/ThemeContext/ThemeContext.tsx";
    
    export default function EmojiPickerContainer() {
      const [emojiPickerDisplay, setEmojiPickerDisplay] = useState(false);
      const [currentEmoji, setCurrentEmoji] = useState(null);
      const { getTheme } = useTheme();
    
      const buttonClickHandler = () => {
        setEmojiPickerDisplay(true);
      };
    
      const emojiSelectHandler = (emoji: { native: SetStateAction<null> }) => {
        setCurrentEmoji(emoji.native);
        setEmojiPickerDisplay(false);
      };
    
      console.log(currentEmoji);
    
      return (
        <div className="relative inline-block">
          {!emojiPickerDisplay && (
            <button
              className="ml-2 p-2 text-2xl rounded border border-gray-500 bg-gray-100 dark:bg-zinc-600 text-black  hover:bg-gray-300  dark:text-white  focus:outline-none"
              onClick={buttonClickHandler}
            >
              <b>
                <FaRegSmile />
              </b>
            </button>
          )}
          {emojiPickerDisplay && (
            <div className="absolute bottom-full right-0 mb-2 z-50">
              <div className="overflow-y-auto  max-w-60 max-h-100 w-full border border-gray-300 rounded-lg shadow-lg bg-white dark:bg-gray-800 scrollbar-thin">
                <Picker
                  data={data}
                  onEmojiSelect={emojiSelectHandler}
                  theme={getTheme() === "dark" ? "dark" : "light"}
                  previewPosition="none"
                />
              </div>
            </div>
          )}
        </div>
      );
    }

我还使用

emoji-mart-react.d.ts

创建了一个类型声明

// src/types/emoji-mart-react.d.ts
declare module '@emoji-mart/react' {
  import * as React from 'react';

  interface PickerProps {
    data: any;
    onEmojiSelect: (emoji: any) => void;
    theme?: string;
    previewPosition?: string;
    // Add other props as needed
  }

  export const Picker: React.FC<PickerProps>;
}

还在

compilerOptions

中添加了这个

tsconfig.json file

"typeRoots": ["./node_modules/@types", "./src/types"],

Answer 1

也许你可以尝试几件事：

• 将此要点添加到您的项目中
• 将

  @types/emoji-mart

  安装到项目的依赖项中

我已经使用 Emoji Mart 在 NextJS 项目 (tsx) 中测试了实现：

https://stackblitz.com/edit/stackblitz-starters-zykald?file=app%2Fpage.tsx

小心，我注意到 Emoji Mart 仅适用于“使用客户端”组件，不适用于使用“使用服务器”的组件。