重建ReactJs組件

我的應用程序中有一個reactjs組件（compA），它調用另一個reactjs組件（compB）來裝載compA。重建ReactJs組件

裏面compB，我有一個按鈕，在功能「componentDidUpdate」我需要銷燬和重建COMPA。

有人有想法如何做到這一點？

大概的代碼是這樣的，但是在我的代碼compA和B中它們在不同的文件中。

use strict'; 
 

 
var CompA = React.createClass({ 
 
    getDefaultProps: function() { 
 
     return { 
 
      name: 'location', 
 
     } 
 
    }, 
 
    render: function() { 
 
     return <CompB name={this.props.name}/>; 
 
    } 
 
}); 
 

 
var CompB = React.createClass({ 
 
    getDefaultProps: function() { 
 
     return { 
 
      name: 'select' 
 
     } 
 
    }, 
 
    componentDidUpdate: function() { 
 
     $('.button').click(function() { 
 
      /* 
 
      * RELOAD HERE COMPONENT 
 
      */ 
 
     }); 
 
    }, 
 
    render: function() { 
 
     return <div><select name={this.props.name}><option value="x">X</option><option value="y">Y</option></select><button id="button">Reload</button></div> 
 
    } 
 
}); 
 

 
ReactDOM.render(<CompA />, document.getElementsByID("compA"));

<html> 
 
<body> 
 
    <div id="compA"></div> 
 

 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
    <script src="https://fb.me/react-0.14.7.js"></script> 
 
    <script src="https://fb.me/react-dom-0.14.7.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 

 
    <script src="comp.jsx" type="text/jsx"></script> 
 
</body>

來源

2016-02-12 Nankym

如果我理解正確的答案，您可以在此情況下，使用'setState'觸發重新渲染HTTPS ：//jsfiddle.net/_alexander_/69z2wepo/31153。或者你可以使用'.forceUpdate' https://jsfiddle.net/_alexander_/69z2wepo/31154/ –

我去分析，我會給你反饋！ – Nankym

@亞歷山大不要這樣。我有一些我沒有寫入代碼的細節。 1）我有一個更多的組件來創建按鈕和選擇，1級以上。 2）對於選擇安裝我使用ajax。 – Nankym

不能從CompB的重建整個COMPA，但是從CompB的調用的setState將重建CompB的，在你的情況下，整個COMPA（因爲你沒有別的東西里面它）。

如果要重建從Ajax源的組件，你可以看看： React Js: How to reload the initila data loaded via ajax?

來源

2016-02-24 18:50:32 Fernando

完美！用一些代碼解決了我的問題！ TNKS！ – Nankym

重建ReactJs組件

回答

相關問題