获取对组件类实例的引用

IT技术 reactjs typescript

2021-04-28 07:30:38

我有一个扩展的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 并获取对组件类实例的引用，我应该怎么做？

3个回答

您有几个选择：

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

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

(2) 使用React.createElement：

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

(3) 使用参考：

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

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

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

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

看起来您以使用 jQuery 的方式使用 React.js，但这是不行的。真的，我无法想象需要做这些事情的案例；我怀疑你不应该这样做。请，(1) 使用 jsx 创建组件，(2) 使用 refs 在该 jsx 上找到组件。喜欢

...

x(){
    this.refs.c.style={color:'blue'}
}

render() {
    return <div ref='c' style={{border:'1px solid red', height:10}} onClick={this.x.bind(this)}/>
}

其它你可能感兴趣的问题

上一篇Carbon3D 的 CLIP 技术如何处理桥梁和支撑材料？下一篇ABS 灯丝安全问题