未呈現React組件

我有一個名爲App.js的文件，這是我的應用程序的主要組件。未呈現React組件

我放在一個新的組件由該文件的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;

不幸的是，這種成分是不是呈現在所有這一頁。我的代碼有問題嗎？

來源

2016-01-20 octavian

只有AjaxReq不顯示？還有，是否有任何控制檯錯誤？ – phpcoderx

是的，只有這一個不顯示。沒有控制檯錯誤。 – octavian

如果您使用jQuery來更新DOM，那麼您錯過了React的要點。從你的ajax響應中更新'state'並讓React用新類重新渲染。 – Mathletics

我不認爲這個片段$(this).addClass("done");做你可能打算做的。
在這種情況下，this是指React組件（虛擬DOM），而不是DOM中的實際元素。

在React之外訪問React組件實例的唯一方法是存儲返回值ReactDOM.render。

另外，有沒有機會忘記將React（var React = require('react')）導入AjaxReq模塊？

來源

2016-01-20 17:50:18 phpcoderx

就像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;

來源

2016-01-20 19:22:16 Donald

不導入React不是問題，因爲我在構建過程中解決了這個問題。你爲什麼在這裏設置狀態？如果我複製粘貼代碼，我會得到'Uncaught TypeError：無法讀取'null'屬性'isLoaded'。 – octavian

我在AJAX調用中設置狀態，作爲跟蹤何時加載的任何東西（避免直接使用jQuery來操作任何東西）。我不確定你的具體用例是什麼，但是我會編輯我的帖子以添加'getInitialState' - 它應該解決你的問題。 – Donald

未呈現React組件

回答

相關問題