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

我在使用 React 的 ref 和类组件时遇到了问题。

我的简化代码如下。我们看到我有一个名为 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"
  ]
}

答案＃1

为了提供对 getInfo 的推断访问 - activeElement 应被断言为类型 Engine（而不是 React.ReactElement<Engine>）或 null。

activeElement 也需要一个初始值 null，因为 undefined 是无效的。

// Engine.
class Engine extends React.Component {

  // Get Info.
  getInfo(count: number) {
    console.log("Info Count:", count);
  }

  // Render.
  render = () => <div>Engine</div>;

}

// Wizard.
export class Wizard extends React.Component {

  // Active Element.
  activeElement: Engine | null = null;

  // Top Level Get Info.
  topLevelGetInfo() {
    const { activeElement } = this;
    if (activeElement) activeElement.getInfo(10);
  }

  // Handle Ref.
  handleRef = (el: Engine | null) => (this.activeElement = el);

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

  // Did Mount.
  componentDidMount() {
    console.log("Mounting Wizard.");
    this.topLevelGetInfo();
  }

}

答案＃2

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

class Engine extends React.Component  {
 ...

 render() { return null; }
}

class Wizard extends React.Component {
  ...
}

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

这里有一个在 codesandbox.io 上可运行的示例——希望这能帮到你 :-)