Question

我最近升级了打字稿，但在其中一个组件中遇到了以上错误。

在该组件render方法中有以下代码：

render() {
   const Tag = props.link ? 'a' : 'div';
   return (
      <Tag className="dummy"> text </Tag>
   );
}

当我直接在代码中返回div或a时，它可以正常工作。当我返回Tag时失败了！

编辑：Github中的未解决问题：https://www.github.com/Microsoft/TypeScript/issues/28768

Answer 1

您的代码很有趣。我在Codesandbox中试用了它，它对TypeScript很有用。

我可能使用了不同的TypeScript版本或tsconfig。或者您使用tslint。您可以在此处检查example。有什么区别？

我使用了这段代码，您可以补充到''的链接，它也可以那样工作。

import * as React from "react";
import * as ReactDOM from "react-dom";

interface Props {}

enum TagTypes {
  a = 'a',
  div = 'div'
}

class Hello extends React.Component<Props, {}> {
  render() {
    let link = "#";
    const Tag: TagTypes = link ? TagTypes.a : TagTypes.div;
    return (
      <Tag className="dummy" href={link}>
        text
      </Tag>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Hello />, rootElement);

Answer 2

在内部渲染中，您已经声明了const Tag as string。

现在在返回块内，React将搜索JSX语法，这里React期望 Tag 作为元素/类。

如果您删除const Tag = ...，将会收到一条错误消息，提示Tag is not defined or similar

最后，您的问题陈述中的数据类型不匹配。

打字稿反应错误：JSX元素没有任何构造或调用签名

2 个答案: