Question

我正在使用generator-react-webpack来创建React网络应用。此Web应用程序依赖于JSON提要 - 其中一个托管在不支持JSONP的CDN上，CDN URL是webapp的子域。有没有办法从React组件中返回JSON数据？

基本反应组件：

var AppComponent = React.createClass({
    loadData: function() {
        jQuery.getJSON(jsonFile.json?callback=?)
        .done(function(data) {
            console.log(data);
        }.bind(this));
    },
    render: function(){
        return ( ... );
    }
});

我已经尝试了一些解决方案，并得出结论我需要在JSON文件上定义我自己的回调，如下所示：

JSON：

handleData({
    "data": "hello World"
})

是否有办法在react组件中定义handleData回调，或者从react组件访问响应？任何关于我如何让它工作的想法都非常感激。谢谢！

Answer 1

如果我正确理解了这个问题，你只需要这样改变你的loadData：

loadData: function() {
    var c = this
    jQuery.getJSON(jsonFile.json?callback=?)
    .done(function(data) {
        c.handleData(data)
    });
},

handleData: function(data) {
    /* Implement here the function to handle the data */
},

Answer 2

这看起来像是一种奇怪的做事方式，尤其是你正在使用jQuery的部分。这是一个客户端实用程序，可以克服不知道所有内容的位置，并且无法直接访问您的元素。当你使用React weith Webpack进行捆绑时使用它是没有意义的：React已经知道一切都在哪里（使用refs）而Webpack意味着你可以只使用常规的通用Node模块来完成你需要做的一切

我建议使用request或类似的通用提取API：

// loadData.js
var request = require('request');
var loadData = function(urlYouNeed, handler) {
  request(urlYouNeed, function(error, response, body) {
    if (error) {
      return handler(error, false);
    }

    // do anything processing you need on the body,
    var data = process(body);
    handler(false, data);
};

所以：只是您在使用require('./loadData')定义的任何组件中可以要求的模块。然后在您的实际组件中执行此操作：

var loadData = require('./loadData');
var AppComponent = React.createClass({
  getDefaultProps: function() {
    return {
      jsonURL: "cdn://whateverjson.json"
    };
  },
  getInitialState: function() {
    loadData(this.props.jsonURL, this.updateData);
    return {
      data: []
    }
  },
  updateData: function(err, data) {
    if (err) {
      return console.error(err);
    }
    data = secondaryEnsureRightFormat(data);
    this.setState({ data: data });
  },
  render: function(){
    var actualThings = this.state.data.map((entry, pos) => {
      return <Whatever content={entry} key={entry.dontUseThePosVariableUpThere}/>
    });
    return (
      <div>
        ...
        {actualThings}
        ...
      </div>
    );
  }
});

更干净。

React Component JSON回调范围

2 个答案: