0

帮助。我已经检查了很长时间的每一点代码，但我无法理解这里有什么问题。

import React from 'react'
import css from './FormsControls.module.css'
import commonCss from '../styles.module.css'
import { Field } from 'redux-form'
import cn from 'classnames'

const FormControl = ({ input, meta: { touched, error }, children, text, mainClass, noerror }) => {
  const hasError = touched && error
  return (
    <div className={cn(css.formControl, mainClass)}>
      <label htmlFor={input.name}>{text}</label>
      {children}
      {!noerror && hasError && <div className={css.error}>{error}</div>}
    </div>
  )
}

将文件从 js 重命名为 ts 后出现问题，如您所见，这不是类型引起的

4

1 回答 1

1

简而言之：如果你想结合 JSX 和 Typescript，你需要使用.tsx，而不是.ts.

JSX 和 Typescript 都是独立开发的 javascript 扩展。结果，它们的语法有一些冲突，特别是尖括号的含义。在 JSX 中，尖括号用于元素，但在 typescript 中，它们用于类型断言。因此，当尝试解析同时使用两者的文件时，并没有明确的方法来判断所有情况下是什么。

为了解决这个问题，typescript 允许你指定尖括号应该被假定为 JSX 元素。你这样做的方式是通过文件扩展名。在.tsx文件中，您可以使用 JSX 元素，解析器永远不会错误地认为它们是类型断言。这样做的结果是您不能在.tsx文件中始终使用尖括号断言，因此您应该改用as断言。

于 2020-07-09T14:29:39.223 回答