Реакция компонента не отображается

Question

У меня есть файл с именем App.js, который является основным компонентом моего приложения.

Я поставил новый компонент в результате возвращенного render метод, который файла:

return (
    <div> 
     <AjaxReq /> 
     //many other components 
    </div> 
); 

Где AjaxReq является следующий метод:

'use strict'; 

var AjaxReq = React.createClass({ 

    loadDoc: function() { 
     $.ajax({ 
      url: "someUrl", 
      context: document.body, 
      success: function(){ 
       $(this).addClass("done"); 
      } 
     }); 
    }, 

    render: function() { 
     return (<div> 
      <p onClick={this.loadDoc}> 
       Click this to make AJAX request. 
      </p> 
     </div>); 
    } 

}); 


module.exports = AjaxReq; 

К сожалению, этот компонент не отображается на всех в страница. Есть ли проблемы с моим кодом?

Answer 1

Я не думаю, что этот фрагмент $(this).addClass("done"); делает то, что вы могли бы намереваться сделать.
В этом контексте this относится к компоненту React (Virtual DOM), а не к фактическому элементу в DOM.

Единственный способ доступа к экземпляру React Component вне React - это сохранить возвращаемое значение ReactDOM.render.

Также, если вы забыли импортировать React (var React = require('react')) в свой модуль AjaxReq?

Answer 2

Как и phpcoderx, не импортировать React не может ничего не вынести. Чтобы добавить класс CSS, как вы пытаетесь сделать, вы хотели бы сделать что-то более похожее на следующее (хотя я не думаю, что это повлияет на отсутствие начальной проблемы с рендерингом, которую вы видите).

'use strict'; 

var AjaxReq = React.createClass({ 
    loadDoc: function() { 
     $.ajax({ 
      url: "someUrl", 
      context: document.body, 
      success: function(){ 
       this.setState({ isLoaded: true }); 
      } 
     }); 
    }, 

    getInitialState: function() { 
     return { isLoaded: false }; 
    }, 

    render: function() { 
     var classname = this.state.isLoaded ? 'done' : ''; 

     return (<div className={classname}> 
      <p onClick={this.loadDoc}> 
       Click this to make AJAX request. 
      </p> 
     </div>); 
    }; 
}); 

module.exports = AjaxReq;