注意

Question

我有一个扩展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

看起来你以一种使用jQuery的方式使用React.js，但它还不行。真的，我无法想象需要做这些事情的情况;我怀疑你不应该这样做。请（1）使用jsx创建组件，（2）在jsx上使用refs找到组件。像

...

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

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

Answer 3

对于我的情况，我使用单例（静态变量）

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

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

3 个答案:

注意