不使用内联 lambda 的 Typescript 和 React refs

Question

以下 TypeScript 中的快速示例展示了一种无需使用内联（这被认为对性能不利）来获取类型化 ref 的方法。然而，必须定义两个变量（refAnimationWrapper 和refAnimationWrapperHandler）来定义一个引用是相当难看的。有没有人有更简单的解决方案，@decorators 可能是一个解决方案吗？

https://www.typescriptlang.org/docs/handbook/decorators.html

import * as React from 'react';
import {TweenMax} from 'gsap';

export class TransitionDummy extends React.Component<any, any> {
    private transitionDuration = 0.4;

    private refAnimationWrapper:HTMLDivElement;
    private refAnimationWrapperHandler = (ref:HTMLDivElement) => this.refAnimationWrapper = ref;

    constructor(props) {
        super(props);
    }

    public componentWillEnter(done) {
        TweenMax.fromTo(this.refAnimationWrapper, this.transitionDuration, {opacity: 0}, {opacity: 1, onComplete: done});
    }

    public componentWillLeave(done) {
        TweenMax.to(this.refAnimationWrapper, this.transitionDuration, {opacity: 0, onComplete: done});
    }
    
    public render() {
        return (
            <div ref={this.refAnimationWrapperHandler}>
                {this.props.children}
            </div>
        );
    }
}

Answer 1

您可以将它们都包装在一个类中，这样每个 ref 都有一个成员：

class RefedElement<T> {
    wrapper: T;
    handler = (ref: T) => this.wrapper = ref;
}

export class TransitionDummy extends React.Component<any, any> {
    private transitionDuration = 0.4;

    private refAnimation: RefedElement<HTMLDivElement>;

    constructor(props) {
        super(props);
        this.refAnimation = new RefedElement<HTMLDivElement>();
    }

    public componentWillEnter(done) {
        TweenMax.fromTo(this.refAnimation.wrapper, this.transitionDuration, {opacity: 0}, {opacity: 1, onComplete: done});
    }

    public componentWillLeave(done) {
        TweenMax.to(this.refAnimation.wrapper, this.transitionDuration, {opacity: 0, onComplete: done});
    }

    public render() {
        return (
            <div ref={ this.refAnimation.handler }>
                {this.props.children}
            </div>
        );
    }
}