未呈现React组件

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组件（虚拟DOM），而不是DOM中的实际元素。

在React之外访问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;