从React中的TypeScript模块返回代码

Question

我正在尝试创建一个包含两个主要部分的简单页面：Menu和Guide。在我的App,tsx中，我有：

import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;

这很好。

但是，在./Guide/Guide.tsx中，我有：

import React, { Component } from "react";
import Menu from "./Menu/Menu";
export default class Guide extends Component {
constructor(props: {}) {
super(props);
}
return (
<Menu />
);
}

Menu.tsx:

import React, { Component } from "react";
export default class Menu extends Component {
return (
<h1>Test</h1>
);
};

然而，我得到了错误'return', which lacks return-type annotation, implicitly has an 'any' return type.。

这是怎么回事？

你可能知道我对React和TypeScript很陌生！

Answer 1

在类组件(如指南和菜单组件(中，您可以在render函数中呈现一些HTML代码。在独立的功能组件(如应用程序组件(中，您可以在return函数中呈现一些HTML代码。在这里，你混合了这两种不同的语法，这就是为什么你会得到这个错误。

要解决此问题，只需将菜单和指南组件中的return功能替换为render功能