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

Question

我在使用 React 引用和类组件时遇到问题。

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

提供对 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();
  }

}