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

Question

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

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);

当 MyComponent 的实例被渲染时，该实例将被分配给 element。