重建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组件

回答

相关问题