获取对组件的类实例的引用

Question

我有一个扩展的typescript类React.Component:

class MyComponent extends React.Component<{}, {}>
{
    constructor(props: {})
    {
        super(props);
    }

    public render()
    {
        return <span>Test</span>;
    }

    public MyMethod() {
        console.log("Working fine");
    }
}

然后有一个地方我手动创建一个实例并将其附加到DOM:

var component = MyComponent;
var element = React.createElement(component, {}, null);
ReactDOM.render(element, myDomElementContainer);

由于系统的体系结构限制,我需要存储对该组件的类实例的引用供以后使用,问题是我在创建的元素中找不到对我的类实例的任何引用,它只有一个引用通过酒店到班上type.

React.createElement只允许我提供类,ReactDOM.render而不喜欢手动实例化的对象.

我应该如何实例化自定义组件,将其附加到DOM并获取对组件类实例的引用？

Answer 1

你有几个选择:

(1)使用ReactDOM.render的返回值:

var element = ReactDOM.render(<MyComponent />, myDomElementContainer);

(2)使用React.createElement:

var element = React.createElement(MyComponent);
ReactDOM.render(element);

(3)使用refs:

var element;
ReactDOM.render(<MyComponent ref={el => element = el } />, myDomElementContainer);

实例将在渲染element实例时分配MyComponent.

Answer 2

对于我的场景，我使用了单例（静态变量）

export let instance = null;

class SearchDialogue extends React.Component {
    constructor(props) {
        super(props);

        instance = this;
    }
}

然后当你需要引用它时你可以运行

import {instance as searchDialogueInstance} from './SearchDialogue'

console.log(searchDialogueInstance.someFooBar);

笔记

请记住，只有当您利用单例设计模式时，这才有效。如果不是，那么您可以将静态变量转换为数组，然后将新实例推送到数组中。请小心，如果您还不熟悉潜在的内存陷阱，这可能会给您带来麻烦。

SearchDialogue.instances.push(this);