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，但是尽管如此，“阅读器”组件仍引发错误，即“ 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：尽管通过包装传递了方法，但是子级仍然无法访问getPage（）

1 个答案: