在打字稿应用程序中反应“不变违规”

Question

尝试在我的 typescript 应用程序中使用 react-collapse (repository) 组件和自制 d.ts 文件时出现以下错误：

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

和

未捕获的不变违规：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。

index.d.ts：

declare namespace ReactCollapse {
    export class Collapse extends __React.Component<any, any> { }
}
declare module "react-collapse" {
    export = ReactCollapse;
}

来自 react-collapse 的原始 index.js：

'use strict';
const Collapse = require('./Collapse').default;
module.exports = Collapse;

应用代码：

import { Collapse } from 'react-collapse';
const render = () => {
    ReactDOM.render(
        <Collapse isOpened={true}>One</Collapse>,
        document.getElementById('test-container')
    );
}
render();

我使用的是 typescript 1.8.10，redux-collapse 是通过 npm 安装的，tsc 使用 commonjs 生成。应用程序是使用 webpack 构建的。我很确定，我的 .d.ts 文件中有错误，但我就是想不通。

更新 1：

尝试像 Hunter 建议的那样为打字添加渲染方法，所以现在打字看起来像这样：

declare namespace ReactCollapse {
    export class Collapse extends __React.Component<any, any> {
        public render(): JSX.Element;
    }
}
declare module "react-collapse" {
     export = ReactCollapse;
}

但我仍然遇到同样的错误。

更新 2：

不知何故，我设法通过下一次输入和模块解析调用来修复错误：

index.d.ts：

declare class Collapse extends __React.Component<any, any> {}

declare module "react-collapse" {   
    export = Collapse;
}

代码：

import Collapse = require('react-collapse');
const render = () => {
    ReactDOM.render(
        <Collapse isOpened={true}>One</Collapse>,
        document.getElementById('test-container')
    );
}
render();

但是，问题是 - 这是一个随机猜测，我不明白它为什么会起作用。那么，也许有人可以解释一下吗？

Answer 1

首先，在 index.js 中，我们可以看到原始 index.js 仅将类导出为导出值，而不是对其进行任何包装。

在代码的第一个版本中，您声明导出的值是命名空间（因此，一个包装器，包含内部的类），所以import { Collapse } from 'react-collapse' 期望得到像{ Collapse: { /* the component class here*/ } } 一样的东西，但实际上得到只是内部{ /* the component class here*/ }。然后你尝试在它上面使用一个名为Collapse（即undefined）的道具并将它传递给React，得到错误。

第二个版本（正确地）声明导出值是类本身，并直接导入它，没有 { xxx } 分解语法，所以 - 不足为奇 - 它可以工作。

Answer 2

您的 Collapse 组件没有 render()