2014-07-19 88 views
5

bileşeni ekleyin kılmak. URL'den içerik yükler. Bu sınama çalışır ancak aynı zamanda beklenmeyen sonsuz bir döngü oluşturur ... render?Reactjs beklenmedik sonsuz döngü uygulanan I Tepki kullanarak

<script type="text/jsx"> 
    /** @jsx React.DOM */ 
    var Include = React.createClass({ 
    getInitialState: function() { 
     return {content: 'loading...'}; 
    }, 
    render: function() { 
     var url = this.props.src; 
     $.ajax({ 
     url: url, 
     success: function(data) { 
      this.setState({content: data}); 
     }.bind(this) 
     }); 
     return <div>{this.state.content + new Date().getTime()}</div>; 
    } 
    }); 

    var Hello = React.createClass({ 
    render: function() { 
     return <Include src="hello.txt" />; 
    } 
    }); 
    React.renderComponent(
    <Hello />, 
    document.getElementById('hello') 
); 
</script> 

cevap

1

yüzden benim ajax çağırma olmamak daha iyi bir yer olduğunu, bir çok kez yürütüldüğünde hale gerçekleştirilen (-_-)'

Bu şekilde çalışıyor:

<script type="text/jsx"> 
    /** @jsx React.DOM */ 
    var Include = React.createClass({ 
    getInitialState: function() { 
     var url = this.props.src; 
     $.ajax({ 
     url: url, 
     success: function(data) { 
      this.setState({content: data}); 
     }.bind(this) 
     }); 
     return {content: 'loading...'}; 
    }, 
    render: function() { 
     return <div>{this.state.content + new Date().getTime()}</div>; 
    } 
    }); 

    var Hello = React.createClass({ 
    render: function() { 
     return <Include src="hello.txt" />; 
    } 
    }); 
    React.renderComponent(
    <Hello />, 
    document.getElementById('hello') 
); 
</script> 

teşekkür ederiz okumak için!

+2

sorunu çalıştı görmek güzel! Tavsiye edeceğim bir küçük öneri ajax çağrısını componentWillMount yöntemine taşımaktır. Sonuç aynıdır, ancak componentWillMount yöntemini kullanmak, endişelerin daha iyi ayrılmasını sağlar. Bir keman ekledim, demek istediğim şeyi yapabilirsiniz. P.s - React is awesome İşte [jsfiddle] (http://jsfiddle.net/NXCyC/50/) – user3508122

+1

@ user3508122 Bunun için componentDidMount öğesinin doğru olduğuna inanıyorum. [Resmi derste] kullanılır (http://facebook.github.io/react/docs/tutorial.html). Düşünebilmemin tek nedeni, "renderComponentToString" (yani sunucu oluşturma) kullanılırken componentWillMount çağrılmasıdır. – FakeRainBrigand

+0

@FakeRainBrigand - İyi nokta! Haklısın - benim hatam. – user3508122

4

Bu daha güvenilir olduğunu bileşeni ekleyin. farklılıklar,

  • saf olmalıdır hale pervane, örneğin dinamik ise
  • getInitialState saf
  • olmalıdır (ajax orada yapamaz) <Include url={this.state.x} />, güncellenmesi gereken
var Include = React.createClass({ 
    getInitialState: function() { 
    return {content: 'loading...'}; 
    }, 
    componentDidMount: function(){ 
    this.updateAJAX(this.props.url); 
    }, 
    componentWillReceiveProps: function(nextProps){ 
    // see if it actually changed 
    if (nextProps.url !== this.props.url) { 
     // show loading again 
     this.setState(this.getInitialState); 

     this.updateAJAX(nextProps.url); 
    } 
    }, 
    updateAJAX: function(url){ 
    $.ajax({ 
     url: url, 
     success: function(data) { 
     this.setState({content: data}); 
     }.bind(this) 
    }); 
    }, 
    render: function() { 
    return <div>{this.state.content}</div>; 
    } 
}); 

var Hello = React.createClass({ 
    render: function() { 
    return <Include src="hello.txt" />; 
    } 
});