Reactjs में एक रीस्टफुल सेवा का उपभोग

Question

मैं प्रतिक्रियाओं से शुरू कर रहा हूं और मैं एक विश्वसनीय सेवा के लिए एक GET अनुरोध करना चाहता हूं, यहां मेरा कोड है, क्या कोई मेरी मदद कर सकता है?

render: function() { 
$.ajax({ 
    url: "http://rest-service.guides.spring.io/greeting" 
}).then(function(data) { 
    $('.greeting-id').append(data.id); 
    $('.greeting-content').append(data.content); 
return <div style="background-color: #ffffff"> 
        <p class="greeting-id">The ID is </p> 
        <p class="greeting-content">The content is </p> 

       </div>;   
    } 

} 

मैं पहले से ही प्रतिक्रिया के साथ एचटीएमएल में jquery लोड करता हूं, लेकिन मैं अभी भी इसे काम नहीं कर सकता, मुझे कुछ महत्वपूर्ण याद आ रही है? या ऐसा करने का एक बेहतर तरीका है? मैं एक और अतिरिक्त चीज़ का उपयोग नहीं करना चाहता, बस प्रतिक्रिया और Jquery, या कुछ और necesary है?

सभी मदद के लिए धन्यवाद।

Answer 1

घटकDidMount विधि में अपना अनुरोध करें और अपने घटक के राज्य में रीस्टफुल सेवा द्वारा लौटाए गए डेटा को असाइन करने के लिए सेटस्टेट विधि का उपयोग करें। में विधि प्रस्तुत करना आप this.state.greetingId और this.state.greetingContent गुण से पहुंच सकते हैं: तो मैं बाद में टिप्पणी का जवाब देने की कोशिश कर रहा हूँ https://facebook.github.io/react/tips/initial-ajax.html

Answer 2

:

componentDidMount: function(){ 
    $.ajax({ 
     url: "http://rest-service.guides.spring.io/greeting" 
    }).then(function(data) { 
     this.setState({ 
      greetingId: data.id, 
      greetingContent: data.content 
     }); 
    } 
)}, 
render: function() { 
    return <div style="background-color: #ffffff"> 
       <p class="greeting-id">The ID is {this.state.greetingId}</p> 
       <p class="greeting-content">The content is {this.state.greetingContent}</p> 
      </div>;   
} 

जानकारी के लिए नीचे दिए गए लिंक का संदर्भ लें एक अलग दृष्टिकोण लोड करने के लिए एक बार लॉगिन सफल हुआ

मैं शुरू होगा 4 घटकों होने से - मुख्य, लॉग इन, SuccessResult, FailureResult

var LoginForm = React.createClass({ 
    render : function(){ 
    return (
     <form onSubmit={this.props.handleSubmit.bind(this, React.findDOMNode(this.refs.login))}> 
     <label for="logininfo">Login Info</label> 
     <input id="logininfo" type="search" placeholder="input" ref="login"/> 
     <input type="submit" value="LogIn" /> 
     </form> 
    ) 
    } 
}); 

var SuccessResult = React.createClass({ 
    render : function(){ 
    var entries = this.props.data; 
    return (
     <div> 
     Is success 
     </div> 
    ) 
    } 
}); 

var FailureResult = React.createClass({ 
    render : function(){ 
    return (
     <div> 
     Is failure 
     </div> 
    ) 
    } 
}); 

var Main = React.createClass({ 
    getInitialState : function(){ 
    return { 

    } 
    }, 

    render : function(){ 
    return (
     <div> 
     {this.state.success ? <SuccessResult entries={this.state.result}/> : <LoginForm handleSubmit={this.handleSubmit.bind(this,'maxea')}/>} 
     {this.state.failure ? <FailureResult /> : null} 
     </div> 
    ) 
    }, 
    handleSubmit : function(loginInfo){ 
    var component = this; 
    $.get('https://api.github.com/users/' + loginInfo). 
     then(function(response){ 
     component.setState({ 
      success : true, 
      result : response.data 
     }) 
     } , 
     function(error){ 
     failure : true 
     }); 
    } 
}); 

// Code goes here 
React.render(
    <Main />, 
    document.getElementById('example') 
); 

एक घटक के साथ किए जाने के बाद आप किसी भी प्रतिक्रिया घटकों में एक घटक DidUnmount का उपयोग कर सकते हैं।