时间戳

首页 > 解决方案 > React 类组件具有属性，但 Typescript 说它没有

reactjs - React 类组件具有属性，但 Typescript 说它没有

问题描述

我遇到了 React ref 和类组件的问题。

我的简化代码如下。我们看到我有一个名为的组件Engine，它有一个属性getInfo。我做了一个测试，this.activeElement &&这意味着它不是null，所以它必须是React.ReactElement<Engine>. getInfo但是，Typescript 编译器失败，并出现错误，如下面的屏幕截图所示，它没有属性。

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"
  ]
}

在此处输入图像描述

标签： reactjstypescript

解决方案

看起来你的Wizard和Engine类没有从React.Component. 尝试像这样更新您的类声明：

class Engine extends React.Component  {
 ...

 render() { return null; }
}

class Wizard extends React.Component {
  ...
}

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

这是codeandbox.io上的一个工作示例-希望对您有所帮助:-)

推荐阅读