小编Sve*_*eta的帖子

我正在使用 mobx/react 构建两个小部件，其中所有逻辑都位于商店内。两者共享大部分设计规则，因此他们的商店 95% 相同。有聪明的方法来处理这种情况吗？例如，是否可以创建这样的继承？

class Animal { 
  @observable name = "";

  constructor(name) {
    this.name = name;
  }

  @computed get sentence() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  @observable isBarking = false;
  @computed get bark() {
    if (this.isBarking){
        console.log('The dog is barking');
    }
  }
  @action
    setIsBarking(isBarking) {
    this.isBarking = isBarking;
  }  
}

我是 Typescript 新手，不知道如何输入这种情况。我正在编写一个自定义挂钩并尝试创建一个回调引用。我的问题是这个函数设置了 ref's current，并且不返回任何内容，但是由于我将它用作 ref ，打字稿对我大喊大叫Property 'current' is missing in type '(node: any) => void' but required in type 'RefObject<HTMLDivElement>'。

先感谢您。

这是代码：

import React, {useCallback, useRef} from 'react'

const useCustom = (): [RefObject<HTMLDivElement>] => {
  const ref = useRef<HTMLDivElement | null>(null)
  const setRef = useCallback(node => {
    ....
    ref.current = node
  }, [])

  return [setRef]
}

const SomeComp = () => {
  const [ref] = useCustom()

  return <div ref={ref}>Text</div>
}