Получение ссылки на класс экземпляра компонента

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

Похоже, вы используете React.js таким образом, что используете jQuery, и это не нормально. На самом деле, я не могу представить себе случая, который требует таких действий; и я подозреваю, что вы не должны этого делать. Пожалуйста, (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)}/> 
}