reactjs - 无法调用 React ExoticComponent

Question

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

NOTE: Exotic component cannot be called.

在研究过程中，我发现了一些与“奇异成分”相关的东西，但没有关于它到底是什么的提示。

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,
                    },
                }
            ]}
        />
    );
}

Answer 1

React.Fragment 类型是使用 ExoticComponent 接口(interface) ( Source ) 声明的

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

来自 ExoticComponent type declaration 旁边的评论

However, we have no way of telling the JSX parser that it's a JSX element type or its props other than by pretending to be a normal component.

We don't just use ComponentType or SFC types because you are not supposed to attach statics to this object, but rather to the original function.

ExoticComponent 是输入特殊组件(因此名称为“exotic”)的变通方法，它不像常规的 React.Component 或 React.FunctionComponent ，但我们仍然希望 TypeScript 将它们解释为一种组件。

---

关于您看到的消息:

NOTE: Exotic component cannot be called.

这可能是接口(interface)或插件故障。您的代码没有任何问题。