打字稿。 将 JSX 元素分配给变量

Question

我有一个非常简单的函数，它返回一个输入及其值。 问题是我不知道如何将 JSX 元素分配给变量。 当使用通常的 React 时，一切都很好，但是使用 TypeScript，我有一个错误。 这是函数本身：

export const useInput = () => {
    const [val, setInputValue] = React.useState("");

    const inputValueHandler = (e: React.FormEvent<HTMLInputElement>) => {
        const currentTarget = e.target as HTMLInputElement;
        setInputValue(currentTarget.value);
    };
      
     const input: JSX.Element = <input value={val} onChange={inputValueHandler}/>;
    
    return [val, input];
  }

错误出现在这里

     const input: JSX.Element = <input value={val} onChange={inputValueHandler}/>;

一个错误

"input" refers to a value, but is used as a type here. Did you mean "typeof input"?ts(2749)

Answer 1

问题是您没有告诉 TypeScript 该代码使用 JSX，因此它认为<input ...是类型断言的开始（尖括号类型，而不是as类型）。 （ 游乐场链接到错误，游乐场配置为不允许 JSX。）

如果您告诉 TypeScript 该代码是 JSX（例如，通过将其放在.tsx文件中），它就可以正常工作。 （当 Playground 设置为支持 JSX 时， Playground 示例显示没有错误。）