React+TypeScript报错'string'不可分配给类型'FC'怎么解决？

报错原因 #

React.FC类型约定组件返回值必须为合法JSX结构（ReactElement类型）或null，你当前的组件直接返回了Intl.NumberFormat.format生成的字符串，不符合类型校验规则，因此触发报错。

解决方案 #

方案1：包裹返回值为JSX结构（推荐，符合React组件使用规范） #

将返回的字符串用空标签（React Fragment）或语义化标签包裹即可，修改后代码如下：

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;

修改后可正常以组件形式调用：<MoneyAmount amount={100} />

方案2：定义为普通工具函数 #

如果不需要使用React组件的相关特性，可直接移除React.FC类型声明，改为普通函数使用：

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

export default MoneyAmount;

调用方式为普通函数调用：{MoneyAmount(100)}

内容的提问来源于stack exchange，提问作者npcomplete