Question

我从reactjs开始，我想向RESTful服务发出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>;        
    }

}

我已经在html中加载了Jquery with react，但是我仍然无法让它工作，我错过了一些重要的东西？或者有更好的方法来做到这一点？我不想再使用另外一件事，只是反应和Jquery，还是更需要的东西？

感谢您的帮助。

Answer 1

在componentDidMount方法中发出请求，并使用setState方法将RESTful服务返回的数据分配给组件的状态。在render方法中，您可以通过this.state.greetingId和this.state.greetingContent属性访问它：

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>;        
}

有关详细信息，请参阅以下链接：https://facebook.github.io/react/tips/initial-ajax.html

Answer 2

所以我试图回答后续评论，以便在登录成功后加载不同的视图

我首先要有4个组件 - Main，Login，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')
);

完成组件后，您可以在任何反应组件中使用componentDidUnmount来清理。

在Reactjs中使用RESTful服务

2 个答案: