Я пытаюсь создать метод выборки, который можно использовать для нескольких компонентов 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));
1
ThirdGhostHand 19 Июн 2018 в 22:46

1 ответ

Лучший ответ

Внутри вашего компонента Reader вместо доступа к this.getpage попробуйте this.props.getpage, и я не понимаю, почему вы делаете следующее:

<div{...getPage('1A1')}>
0
Piyush Zalani 19 Июн 2018 в 19:54