typescript 类型脚本-字符串“不能赋给类型”FC

nr9pn0ug 于 2023-02-10 发布在 TypeScript

关注(0)|答案(2)|浏览(174)

我正在接近错误

- 类型'（ prop ：具有子项的 prop 〈{数量：数字;}〉）=〉字符串"不能赋给类型" FC〈{金额：类型"string"不能赋给类型"ReactElement〈any，any〉|空值. ts（2322）**

在使用下面的typescript函数时，不理解这里的问题，任何帮助都是感激的，谢谢!
代码如下，

const MoneyAmount: React.FC<{amount : number}> = (props) => {
    return (
        new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD", 
            maximumFractionDigits: 4
        }).format(props.amount))
}

export default MoneyAmount  ;

typescript

来源：https://stackoverflow.com/questions/69187723/typescript-string-is-not-assignable-to-type-fc

2条答案

按热度按时间

lsmepo6l1#

看一看FC类型：

type FC<P = {}> = FunctionComponent<P>;

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

此函数返回ReactElement<any, any> | null。
而它又只是一个具有一组属性的jsx。

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
        type: T;
        props: P;
        key: Key | null;
    }

您需要做的就是将返回值封装到span中：

const MoneyAmount: React.FC<{ amount: number }> = (props) => {
  const text = new Intl.NumberFormat("en-US", {
    style: "currency", currency: "USD", maximumFractionDigits: 4
  })
    .format(props.amount)

  return <span>{text}</span>
}

让我们尝试在不使用FC的情况下使用它：

import React from 'react'

const MoneyAmount = (props: { amount: number }) => {
  return (
    new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      maximumFractionDigits: 4
    }).format(props.amount))
}

// Its return type 'string' is not a valid JSX element.
const x = <MoneyAmount amount={42} />

因此，string只是无效的JSX

赞(0）回复(0）举报 2023-02-10

q5iwbnjs2#

可以将字符串封装在<Fragment>中，它将通过类型检查。
问题是React需要ReactElement类型，而string不是其中之一。Fragment允许您向组件返回字符串和数组。

赞(0）回复(0）举报 2023-02-10