javascript - 在 React 组件上设置静态数据/状态

Question

我希望在我的 componentDidMount 生命周期方法中设置对 new ResizeObserver 和 DOM 元素的引用。我需要这些引用可以在 componentWillUnmount 中访问，所以目前我在 React 组件本身上设置它们(通过 this)。

但是，这对 Typescript 来说是有问题的，因为 Typescript 无法识别我的 React 组件上的属性 ro 和 el。此外，我什至不确定这是否是执行此操作的最佳方法。这是一个很好的约定还是有更好的方法来设置静态数据？

public componentWillUnmount() {
    this.ro.unobserve(this.el);
}

public componentDidMount() {
    this.el = ReactDOM.findDOMNode(this.refs.el);
    this.ro = new ResizeObserver((entries) => {
        for (let entry of entries) {
            // set state
        }
    });

    this.ro.observe(this.el);
}

Answer 1

您可以通过在组件类中将 ro 和 el 声明为可选属性来获取此类型。只需添加

private ro? : ResizeObserver
private el? : Element

它们是可选的，因为它们未在构造函数中设置，因此您必须在每个使用它们的地方添加(多余的)存在性检查。例如:

if (this.ro && this.el) {
  this.ro.unobserve(this.el);
}

两者都将始终存在于 componentWillUnmount 中，因为它们是在 componentDidMount 中初始化的，但这不是您可以在 TypeScript 中表达的内容。