反应 JSX 组件。无法通过流量

Question

让以下代码按预期工作：

import Button from "./components/Button"
import Excel from "./components/Excel";
import Logo from "./components/Logo";
import ReactDOM from "react-dom";
import React, {Component} from "react";

type Props = {};
type State = {};

class Parent extends Component<Props, State> {

    constructor(props: Props) {
        super(props)
    }

    triggerJson() {
        this.excel.exportJSON();
    }
    triggerCsv() {
        this.excel.exportCSV();
    }
    render() {
        return (
            <div>
                <div style={{display: "inline-block", background: "purple"}}>
                    <Logo/>
                </div>
                <h1> Welcome to The App!^^!</h1>
                <div>
                    <Button onClick={this.triggerJson.bind(this)}>Export JSON</Button>
                    <Button onClick={this.triggerCsv.bind(this)}>Export CSV</Button>
                </div>
                <Excel ref={excel => this.excel = excel} headers={headers} initialData={data} search={true}/>
            </div>
        );
    }
}

但试图通过flow（安装npm install flow-bin）检查会给我以下错误：

Cannot get this.excel because property excel is missing in Parent [1].

和

Cannot assign excel to this.excel because property excel is missing in Parent [1].

我需要通过单击按钮调用Excel's 函数exportJSON 和exportCSV。我应该如何修改此代码以通过flow控制？

我得到的另一个错误是：

Cannot call ReactDOM.render with document.getElementById(...) bound to container because null [1] is incompatible with
Element [2].

Answer 1

我认为您只需要以下内容：

class Parent extends Component<Props, State> {
   excel: whateverTheTypeOfThisShouldBe;
   ... (the rest of your class)

这将excel 声明为Parent 类的属性。