如何将 React 组件连接到 Quickbooks 按钮答案

【问题标题】：How to connect React component to the Quickbooks Button如何将 React 组件连接到 Quickbooks 按钮
【发布时间】：2017-08-14 00:31:54
【问题描述】：

我正在尝试将 Quickbooks 按钮 (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>

我尝试使用以下 React 代码，但它不起作用。任何帮助表示赞赏。谢谢。

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 组件中调用它。按钮仍然没有显示。

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;

我还创建了以下小提琴：https://jsfiddle.net/aewhatley/7eL716mp/

【问题讨论】：

要动态加载脚本标签，你需要添加第一个，等待它加载，然后添加第二个，等待它加载，然后运行你的初始化代码（不需要有该部分的脚本标签）。
您还需要避免多次加载脚本，并且应该在 div 上使用 ref 并设置其 innerHTML 而不是创建<body>。
对不起，我不确定我明白你的意思。你能发布一些代码吗？谢谢。

标签： javascript reactjs quickbooks quickbooks-online

【解决方案1】：

@alex 看起来您正在尝试在渲染之前访问 Dom，您应该使用“componentDidMount”将您的直觉按钮加载到 div 或容器上。

我创建了一个 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>

【讨论】：

【解决方案2】：

你在哪里渲染你的 ConnectToQuickBooksOnlineButton 组件？就像在 index.jsx 或 app.jsx 中一样？您可以在 index.html 中包含所有脚本，或者在根组件 (index/app.jsx) 中创建它们，并在 ConnectToQuickBooksOnlineButton 中仅创建所需的 html 标记，如下所示：

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

【讨论】：

我尝试这样做，将脚本内容放在 index.html 中。但它没有用。我发布了我在编辑的 OP 中使用的代码。

【解决方案3】：

你不需要。只需使用您的后端生成链接。

// backend (expressJs)
router.post('/authUri', async (req: Request, res: Response, next: NextFunction) => {

  const authUri = oauthClientGlobal.authorizeUri({
    scope: [OAuthClient.scopes.Accounting],
    state: 'intuit-test',
  })

  res.status(200).json(authUri)
})

然后是前端（反应）调用您的后端路由以获取 Quickbooks URL 然后通过响应将页面重定向到快速手册：

      window.location.href = authUri  // response Quickbooks URL From Backend

【讨论】：