时间戳

首页 > 解决方案 > 无法调用 React ExoticComponent

reactjs - 无法调用 React ExoticComponent

问题描述

在研究 React.Fragment 时，我在 VisualStudio Code 上遇到了一条奇怪的 Intellisense 消息：

注意：不能调用外来组件。

在研究时，我发现了一些与“Exotic component”相关的东西，但没有关于它实际上是什么的提示。

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

有人可以解释一下为什么会发生这种情况，什么是 ExoticComponent？

这是一段代码，消息在眨眼间出现：

// ...

render () {
    return (
        <RandomComponent
            tabs={[
                {
                    label: (
                        <React.Fragment>
                            Confirm ordered qty
                            <WarningIcon />
                        </React.Fragment>
                    ),
                    parentClasses: {
                        labelContainer: classes.tabContainer,
                        label: classes.tab,
                    },
                }, {
                    label: (
                        <React.Fragment>
                            Material to be approved
                            <WarningIcon />
                        </React.Fragment>
                    ),
                    disabled: !IsMaterialToBeAnalyzed,//SystemTypeCode !== 'PALETTI',
                    parentClasses: {
                        labelContainer: classes.tabContainer,
                        label: classes.tab,
                    },
                },
                {
                    label: (
                        <React.Fragment>
                            Assign materials to staging area
                            <WarningIcon />
                        </React.Fragment>
                    ),
                    parentClasses: {
                        labelContainer: classes.tabContainer,
                        label: classes.tab,
                    },
                }
            ]}
        />
    );
}

标签： reactjstypescript

解决方案

使用接口（Source）React.Fragment声明类型ExoticComponent

const Fragment: ExoticComponent<{ children?: ReactNode }>;

来自类型声明旁边的评论ExoticComponent

但是，我们无法告诉 JSX 解析器它是一个 JSX 元素类型或其 props，只能伪装成一个普通组件。

我们不只是使用 ComponentType 或 SFC 类型，因为您不应该将静态附加到此对象，而是附加到原始函数。

键入特殊组件（因此称为“exotic”）的ExoticComponent一种解决方法，它的行为不像常规React.Componentor React.FunctionComponent，但我们仍然希望 TypeScript 将它们解释为一种组件。

关于您看到的消息：

注意：不能调用外来组件。

这可能是接口或插件故障。你的代码没有问题。

推荐阅读