Question

尝试使用自制的d.ts文件在typescript脚本应用程序中使用react-collapse（repository）组件时出现以下错误：

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。

和

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

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，通过npm安装了redux-collapse，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*/ } }的smth，但实际上只获得内在的{ /* the component class here*/ }。然后你尝试使用一个名为Collapse的支柱（undefined）并将其传递给React，得到错误。

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

Answer 2

您的折叠组件没有render()

反应＆＃39;不变违规＆＃39;在打字稿应用程序中

2 个答案: