Quickbooksボタンに接続してコンポーネントを反応させようとしています

QuickBookに接続ボタン（https://developer.intuit.com/docs/0100_quickbooks_online/0100_essentials/000500_authentication_and_authorization/widgets#/Connect_to_QuickBooks_button）をReactコンポーネントにしようとしていますが、次のメソッドをコピーしようとしています：Adding script tag to React/JSX。私が働いていない反応し、次のコードを、使用しようとしましたQuickbooksボタンに接続してコンポーネントを反応させようとしています

<script 
    type="text/javascript" 
    src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js"> 
</script> 
<script src="https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    intuit.ipp.anywhere.setup({ 
      grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet', 
      datasources: { 
       quickbooks : true, 
       payments : true 
      }, 
      paymentOptions:{ 
        intuitReferred : true 
      } 
    }); 
</script> 
<body> 
    <ipp:connectToIntuit></ipp:connectToIntuit> 
</body>

：

Quickbooksのボタンには、次のスクリプトコードを使用しています。どんな助けもありがとうございます。ありがとう。

import React from 'react'; 

class ConnectToQuickBooksOnlineButton extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
     }; 
    } 

    componentWillMount() { 
      const library = document.createElement("script"); 
      library.src = "https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js"; 
      library.type = "text/javascript" 
      library.async = true; 
      document.body.appendChild(library); 

      const setup = document.createElement("script"); 
      setup.src = "https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js"; 
      setup.type = "text/javascript"; 
      setup.async = true; 
      document.body.appendChild(setup); 

      const connect = document.createElement("script"); 
      connect.type = "text/javascript"; 
      connect.innerHTML = "intuit.ipp.anywhere.setup({grantUrl: '/quickbooksauth',datasources: {quickbooks : true, payments : true}, paymentOptions:{intuitReferred : true}});" 
      document.body.appendChild(connect); 

      const body = document.createElement("body"); 
      body.innerHTML = "<ipp:connectToIntuit></ipp:connectToIntuit>"; 
      body.async = true; 
      document.body.appendChild(body); 
    } 

    render(){ 
     return <div />; 
    } 
}; 

export default ConnectToQuickBooksOnlineButton;

私は、スクリプトの内容をindex.htmlに入れて、Quickbooksコンポーネントから呼び出そうとしました。ボタンはまだ表示されません。 https://jsfiddle.net/aewhatley/7eL716mp/

出典

2017-03-22 Alex

を作成したシンプルな構成要素であります最初のものを追加し、それが読み込まれるのを待ってから、 2番目のコードを追加して読み込みを待ってから、initコードを実行します（その部分にスクリプトタグを付ける必要はありません）。 – FakeRainBrigand

また、スクリプトを何度も読み込まないようにする必要があります。また、divでrefを使用し、innerHTMLを設定する代わりに、 ' 'を作成する必要があります。 – FakeRainBrigand

申し訳ありませんが、私はあなたが何を意味しているか分かりません。いくつかのコードを投稿できますか？ありがとう。 – Alex

@alexは次のようになります前にDomにアクセスしようとしていますが、 "componentDidMount"を使用してdivまたはコンテナにintuitボタンを読み込む必要があります。

実装を説明するWebpackBinを作成しました。これを実現したいのであれば教えてください。

これは、「私は動的にあなたのスクリプトタグをロードするには

QuickBooks.js

ワーキングデモWebpackBin https://www.webpackbin.com/bins/-Kg6yu5JUmy9dD08JI_A

import React from 'react' 
 

 
class QuickBooks extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    
 
    window.intuit.ipp.anywhere.setup({ 
 
     grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet', 
 
     datasources: { 
 
     quickbooks : true, 
 
     payments : true 
 
     }, 
 
     paymentOptions:{ 
 
     intuitReferred : true 
 
     } 
 
    }) 
 
    
 
    } 
 
    componentDidMount() { 
 
     let buttonContainer = document.getElementById("intuButton") 
 
     const connectToIntuit = document.createElement('ipp:connectToIntuit'); 
 
     buttonContainer.appendChild(connectToIntuit); 
 
    } 
 
    render(){ 
 
     return (
 
      <div id="intuButton"></div> 
 
    ) 
 
    } 
 
} 
 

 
export default QuickBooks

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

出典

2017-03-26 01:09:43 diegochavez

はい、うまくいきます！どうもありがとうございます！ – Alex

あなたConnectToQuickBooksOnlineButtonコンポーネントをレンダリングします：

import React from 'react'; 

class ConnectToQuickBooksOnlineButton extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
     }; 
    } 

    componentWillMount() { 
     const connectToIntuit = document.createElement('ipp:connectToIntuit'); 
     document.body.appendChild(connectToIntuit); 
    } 

    render(){ 
     return <div ref="ipp:connectToIntuit"/>; 
    } 
}; 

export default ConnectToQuickBooksOnlineButton;

は、私はまた、次のフィドルを作成していますか？ index.jsxやapp.jsxのように？あなたのindex.html内のすべてのスクリプトを含めるか、またはあなたのルートコンポーネント（インデックス/ app.jsx）でそれらを作成し、ConnectToQuickBooksOnlineButtonで、このように、唯一の必要なhtmlタグを作成することができます。

componentWillMount() { 
     const connectToIntuit = document.createElement('ipp:connectToIntuit') 
     document.body.appendChild(connectToIntuit) 
}

出典

2017-03-24 08:40:16 Gayane

私はそれをやってみました。スクリプトをindex.htmlに入れました。しかし、それは動作しませんでした。編集したOPで使用したコードを投稿しました。 – Alex

Quickbooksボタンに接続してコンポーネントを反応させようとしています

答えて

関連する問題