绑定元素“xxx”在 Typescript 中隐式存在“任何”类型错误

Question

我有一个基于 TypeScript 的 ReactJS 项目。以下是一个这样的文件：Layout.tsx

import React from 'react';
import { Helmet } from 'react-helmet-async';
import NavigationBar from './navigation/NavigationBar';
import Footer from './footer/Footer';

const Layout = ({ title, description, children }) => {
     return (
          <>
               <Helmet>
                    <title>{title ? title + " - React Boilerplate" : "React.js Boilerplate"}</title>
                    <meta name="description" content={description || "React.js Boilerplate"} />
               </Helmet>
               <NavigationBar />
               <main className="container">
                    {children}
               </main>
               <Footer />
          </>
     );
}

export default Layout;

为此，我不断收到：Binding element 'title' implicitly has an 'any' type. 我在网上尝试了解决方案，但所有这些都是针对 Javascript 的，似乎与我的不匹配。在这里感谢您的帮助。

Answer 1

您的组件（您的功能）缺少输入。 首先你必须告诉 TS 这是FunctionalComponent，其次你必须告诉它它的道具。

你可以这样做

import React from 'react';
import { Helmet } from 'react-helmet-async';
import NavigationBar from './navigation/NavigationBar';
import Footer from './footer/Footer';

interface LayoutProps {
  title?: string;
  description?: string;
}

const Layout: React.FC<LayoutProps> = ({ title, description children }) => {
     return (
          <>
               <Helmet>
                    <title>{title ? title + " - React Boilerplate" : "React.js Boilerplate"}</title>
                    <meta name="description" content={description || "React.js Boilerplate"} />
               </Helmet>
               <NavigationBar />
               <main className="container">
                    {children}
               </main>
               <Footer />
          </>
     );
}

export default Layout;