React类组件具有属性，但Typescript表示没有

Question

我在使用React ref和class组件时遇到问题。

我的简化代码如下。我们看到我有一个名为Engine的组件，它具有一个属性getInfo。我对this.activeElement &&进行了测试，这意味着它不是null，因此它必须是React.ReactElement<Engine>。但是，Typescript编译器失败，并显示错误，该错误不具有属性getInfo，如下面的屏幕快照所示。

class Engine extends React.Component {
    getInfo(count: number): void {
        console.log('info count:', count);
    }
}

class Wizard extends React.Component {
    activeElement: null | React.ReactElement<Engine>

    topLevelGetInfo(): void {
        this.activeElement && this.activeElement.getInfo(10);
    }

    handleRef = (el: null | React.ReactElement<Engine>) => this.activeElement = el;

    render() {
        return (
            <div>
                <Engine ref={this.handleRef} />
            </div>
        )
    }
}

我的tsconfig.json：

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "sourceMap": true,
    "jsx": "react",
    "baseUrl": "src",
    "strict": true,
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "build",
    "build_test"
  ]
}

Answer 1

好像您的Wizard和Engine类不是从React.Component扩展而来的。尝试像这样更新类声明：

class Engine extends React.Component  {
 ...

 render() { return null; }
}

class Wizard extends React.Component {
  ...
}

另外，请确保为render()组件包括必需的<Engine />方法（即，如图所示）。

这里是a working example on codesandbox.io-希望对您有所帮助：-）

Answer 2

要提供对Callback<E, Observable[]>的推断访问权限，应将getInfo声明为类型activeElement（而不是Engine）或React.ReactElement<Engine>。

null还需要一个初始值activeElement，因为null无效。

undefined