React TS：尽管通过包装器传递方法，child 仍然无法访问 getPage()

Question

我正在尝试构建一个可以通过高阶组件共享给一堆 Reader 组件的获取方法。我相信我已经正确构建了 HOC，但我不是 100% 确定。

import React, { Component } from 'react';
    import base from "./firebase";
    export default (ChildComponent) => {
        class GetPage extends Component<{},any> {
            constructor(props: any) {
              super(props);
              this.state = {
                text: "Hii"
              };
            }

            public getPage(page: string) {
              base
                .fetch(page, { context: this, })
                .then(data => this.setState({ text: data }));
                console.log(this.state.text)
            }
            public render() {
                return <ChildComponent getPage={this.getPage} text={...this.state.text} {...this.props}/>;
            }
        }
        return GetPage;
    };

您可以看到我在第二行导入了 HOC，但尽管如此，'Reader' 组件还是抛出了一个错误，指出 'getPage' 无处可寻。

import * as React from "react";
import GetPage from "./fetch";

class Reader extends React.Component<{},any>{

    public componentWillMount() {
        this.getPage('1A1');
        }

    public render() {
    return <div{...getPage('1A1')}>{...this.state.text}</div>;
    }
}

export default (GetPage(Reader));

Answer 1

在您的 Reader 组件中而不是访问 this.getpage 尝试使用 this.props.getpage 我不明白你为什么要这样做：

<div{...getPage('1A1')}>

React TS：尽管通过包装器传递方法，child 仍然无法访问 getPage()

React TS: Despite passing method through wrapper, child still can't access getPage()

higher-order-functions

typescript

reactjs