reactjs - React with TypeScript：如何在新组件中访问 HOC 方法

Question

嗨，我有一个道具和状态的接口：

interface IOffersProps
{
    nextStep: () => void;
    step: number
}

export default IOffersProps

interface IOffersState
{}

export default IOffersState;

我创建了一个 HOC，它具有例如 myhocMethod 方法，如下所示：

const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>

    class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
    {
        constructor(props: TProp & IOffersProps)
        {
            super(props);

            this.myhocMethod= this.myhocMethod.bind(this);
        }

        myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
        {
            //do something
        };

        render()
        {
            return(
                <Component {...this.props} />
            );
          }
    }

export default addOffersLogic;

现在在我的新组件中，我无法访问myhocMethod方法。我正在尝试像这样访问它。

class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
    constructor(props: IOffersProps & WithStyles<typeof styles>)
    {
        super(props);
    }

    render()
    {
        const css = this.props.classes;

        const Body = () =>
            <StackPanel>
                <HorizontalLinearStepper step={this.props.step} />
                Offers
                <Button
                    color="primary"
                    className={css.button}
                    onClick={this.myhocMethod}>
                    Continue
                </Button>
                <Footer />
            </StackPanel>

        return Body();
    }
}

const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);

我的目标是将相同的逻辑放在一个文件中。谢谢

标签： reactjstypescripthigher-order-components

Answer 1

为了访问 HOC 中定义的方法，您需要将其作为道具传递给使用 HOC 包装的组件

const addOffersLogic = <TProp extends IOffersProps, TState extends IOffersState>(Component: React.ComponentType<TProp> | React.StatelessComponent<TProp>) =>

    class OffersBase extends React.Component<TProp & IOffersProps, TState & IOffersState>
    {
        constructor(props: TProp & IOffersProps)
        {
            super(props);

            this.myhocMethod= this.myhocMethod.bind(this);
        }

        myhocMethod= (e: React.MouseEvent<HTMLInputElement, MouseEvent>) : void =>
        {
            //do something
        };

        render()
        {
            return(
                <Component {...this.props} myhocMethod={this.myhocMethod}/>
            );
          }
    }

export default addOffersLogic;

---

class OffersWithoutLogicDesktop extends React.Component<IOffersProps & WithStyles<typeof styles>, IOffersState>
{
    constructor(props: IOffersProps & WithStyles<typeof styles>)
    {
        super(props);
    }

    render()
    {
        const css = this.props.classes;

        const Body = () =>
            <StackPanel>
                <HorizontalLinearStepper step={this.props.step} />
                Offers
                <Button
                    color="primary"
                    className={css.button}
                    onClick={this.props.myhocMethod}>
                    Continue
                </Button>
                <Footer />
            </StackPanel>

        return Body();
    }
}

const OffersDesktop = addOffersLogic(OffersWithoutLogicDesktop);