TypeScript 检入 React 功能组件

Question

I am starting out with TypeScript on a React app (next.js) and I'm not sure how to type React components.我从 React 应用程序 (next.js) 上的 TypeScript 开始，我不确定如何键入 React 组件。

I have a component like...我有一个像...

type Props = {
  children: JSX.Element;
};

export default function SiteLayout({ children }: Props): React.FC {
return (
  <div>
    {children}
  </div>
)

But this gives me the following error:但这给了我以下错误：

var children: JSX.Element var children：JSX.Element
Type 'Element' is not assignable to type 'FC<{}>'.类型“元素”不可分配给类型“FC<{}>”。
Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.ts(2322)类型 'Element' 不匹配签名 '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.ts(2322)

I also tried to get it working with simply using JSX.Element :我还尝试使用JSX.Element让它工作：

type Props = {
  children: JSX.Element;
};

export default function SiteLayout({ children }: Props): JSX.Element {

return (
  <div>
    {children}
  </div>
)

But this gives the following error in child components.但这会在子组件中产生以下错误。

(alias) function SiteLayout({ children }: Props): JSX.Element import SiteLayout (别名) function SiteLayout({ children }: Props): JSX.Element import SiteLayout
This JSX tag's 'children' prop expects a single child of type 'Element', but multiple children were provided.ts(2746)这个 JSX 标签的“children”属性需要一个“Element”类型的子元素，但提供了多个子元素。ts(2746)

The above component is being consumed in by a Next.js page component like:上述组件被 Next.js页面组件消耗，例如：

import Head from 'next/head';
import SiteLayout, { siteTitle } from '../../components/SiteLayout';

export default function myPage() {
  const pageTitle = 'My Page';


  return (
    <SiteLayout>
      <Head>
        <title>{siteTitle + ' - ' + pageTitle}</title>
      </Head>
      <div>
        content...
      </div>
    </SiteLayout>
  );
}

What is the correct approach?什么是正确的方法？ I'm confused when JSX.Element should be used and when React.FC should be.我很困惑何时应该使用JSX.Element以及何时应该使用React.FC 。

Answer 1

The return type of the function is not a component, the function itself is component. function 的返回类型不是组件，function 本身就是组件。 That's why instead of这就是为什么而不是

function SiteLayout({ children }: Props): React.FC { ...

It should be:它应该是：

const SiteLayout: React.FC<Props> = ({ children }: Props) => {
    return (
      <div>
        {children}
      </div>
    );
}

Regarding the type of children prop, if there's no restriction on kind of children (string, boolean, element etc,) better to use ReactNode :关于children道具的类型，如果对子项的种类（字符串、boolean、元素等）没有限制，最好使用ReactNode ：

type Props = {
    children: React.ReactNode
}

Here's how it is defined. 这是它的定义方式。

Answer 2

Your function is returning a React.FC type, which shouldnt be the case.您的 function 正在返回 React.FC 类型，这不应该是这种情况。 The return type of function components is ReactNode, plus children are implicitly provided by the React.FC typing. function 组件的返回类型是 ReactNode，而子组件由 React.FC 类型隐式提供。 If you explicitly type them, you can omit the React.FC and write:如果你明确输入它们，你可以省略 React.FC 并写：

const SiteLayout = ({children}: Props) => {
  return (
    <div>
      {children}
    </div>
  )
}

TypeScript 检入 React 功能组件

问题描述

2 个解决方案

解决方案1
4 已采纳 2020-07-02 11:44:59

解决方案2
0 2020-07-02 12:00:12

TypeScript 检入 React 功能组件

问题描述

2 个解决方案

解决方案1 4 已采纳 2020-07-02 11:44:59

解决方案2 0 2020-07-02 12:00:12

解决方案1
4 已采纳 2020-07-02 11:44:59

解决方案2
0 2020-07-02 12:00:12