Question

我在一个类中有一个方法：

class Foo {
    getElement : JSX.element () {
        return <Component ref={React.createRef()} />
    }
}

就像普通的React.js代码（没有打字稿）一样，我希望能够获得组件本身，就像这样：

const foo = new Foo();
const component = foo.getElement().ref.current;

但是，JSX.Element类仅具有属性key，props和type。

如何在打字稿中获取组件？

我已经为此停留了一段时间，因为：

首先，getElement的返回类型为Component，但我没有意识到实际返回的是Element
实现元素返回后-通过查看的返回类型，我使用了通用的Element类。
我已经到达了上面的位置，终于可以正常返回，但是它具有我需要的所有属性，除了ref。

Answer 1

这似乎可能是Reacts类型定义中的issue。

一种解决方案是使用ref匿名停止，并将其与Element分组，即：

type RefElement = { ref: RefObject<Component>, element: JSX.Element };

class Foo {
    getRefElement: RefElement () {
        const ref = createRef<Component>();
        return {
            ref: ref,
            element: <Component ref={ref} />
        }
    }
}

...

const foo = new Foo();

...

const component = foo.getRefElement().ref.current;

从react JSX.Element恢复组件引用

1 个答案: