javascript - 响应 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 的 函数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 类的属性。