2017-08-13 4 views
1

よしとのredditのAPIからこのコード・アクセス・データは、私はここには私がすべてで、これは取得するにはreddit.jsonコールにアクセスする方法を見つけ出すことはできませんReactJS

componentDidMount() { 
    var _this = this; 
    var cbname = `fn${Date.now()}`; 
    var script = document.createElement("script"); 
    script.src = `https://www.reddit.com/reddits.json?jsonp=${cbname}`; 

    window[cbname] = function(jsonData) { 
     _this.setState({ 
     navigationItems: jsonData.data.children 
     }); 
     delete window[cbname]; 
     document.head.removeChild(script); 
    }; 

    document.head.appendChild(script); 
    } 

を、このコードを持っている方法を考え出す助けが必要ReactJSの仕組みを学んだ人にとっては非常に混乱しています。 また、これは、その必要包み、状態+成分コンストラクタである:

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeNavigationUrl: "", 
     navigationItems: [], 
     storyItems: [], 
     title: "Please select a sub" 
    }; 
    } 

コードの残りの部分についてhttps://github.com/ssorallen/react-reddit-clientを参照して、コード片をSRC /上記を見れ

をapp.jsに配置されていますコード、私はscript.srcをインスタンス化する行までのすべてを理解しています その後、私は何が起こっているのか分からず、ウィンドウ[cbname]の部分でさえ理解できません。私はそれの周りでグーグルを試みたが、それはあまりにも混乱している、特に実際にはウィンドウ[cbname]で何が行われているのか、そしてコードピースがそれを削除した後にドキュメントの頭に子(スクリプト)を追加している理由。基本的にcallback=foo

例えば{ "foo": "bar" }fooというグローバル関数を呼び出してオブジェクトとしてJSONを渡す関数コールバックにJSONをラップするAPIを必要とする -

答えて

0

これはJSONP APIを使用しています。

この場合、window['fn' + Date.now()]をコールバックとして登録します。 APIがそれを呼び出すと、状態を設定し、グローバル関数を削除します。

What is JSONP all about?

TLDRを参照してください:JSONPは、ウィンドウオブジェクトにグローバルな機能を必要とします。呼び出されると、状態を設定し、自身とスクリプトタグを削除します。 JSONPはCORSを回避するのに便利です

+0

ありがとうございます!これは完全に説明した – adriam

関連する問題