如何在 ReactJS 应用程序中插入第 3 方库答案

【问题标题】：How to insert a 3rd party library in ReactJS app如何在 ReactJS 应用程序中插入第 3 方库
【发布时间】：2020-12-05 07:13:35
【问题描述】：

它在纯 JS 中完美运行，但现在我试图在我的 ReactJS 应用程序中导入 KaiOS SDK avert 的库，但我不能，编译总是失败并显示此消息：

  Line 230:9:  'getKaiAd' is not defined  no-undef

如何做到这一点！？ (js library file)

这是我的简化代码，我们可以看到第 12 行的函数调用失败..

import React, { Component } from 'react'

import './App.css'
import Result from './Result'
import BoutonListe from './BoutonListe'
import Tableau from './Tableau'

class App extends Component {


    addAdvert(element){
        getKaiAd({
            publisher: 'MON ID',
            app: 'ExCurrency',
            test:1, //1 for test, 0 for prod
            onerror: err => console.error('Custom catch:', err),
            onready: ad => {
                // Ad is ready to be displayed
                // custom event
                let button = document.getElementById(element)
                button.addEventListener('focus', function btnListener() {
                    button.removeEventListener('focus', btnListener)
                    // calling 'display' will display the ad
                    ad.call('display');
                })
            }
        });
    }


    componentDidMount(){
        this.addAdvert('ListeG');
    }

    render() {
      const {montant,
             montantRes,
             deviseListeG,
             deviseListeD,
             actualRate,
             dateUpdate,
             styleTab,
             tableauZero,
             nomDevises }= this.state

      return (
        <div>
            <Tableau styli={styleTab}
                     tableauO={tableauZero}
                     noms={nomDevises}
                     onKeyDown={this.handleKeydown}/>
        </div>
      )
  }
}
export default App;

我刚刚添加了： import {getKaiAd} from './Kaiads.v4.min.js'

我得到了：

Failed to compile.

./src/Kaiads.v4.min.js
  Line 1:695:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:792:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:901:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:1327:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:1385:  'getKaiAd' is not defined                                              no-undef
  Line 1:1395:  'getKaiAd' is not defined                                              no-undef
  Line 1:2229:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:2312:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:2369:  'getKaiAd' is not defined                                              no-undef
  Line 1:2420:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:2430:  'getKaiAd' is not defined                                              no-undef
  Line 1:2466:  'getKaiAd' is not defined                                              no-undef

Search for the keywords to learn more about each error.

【问题讨论】：

刚刚在@user3875913回答后更新了我的帖子
你试过 import * as getKaiAd from "path/to/file" 吗？

标签： javascript reactjs sdk kaios

【解决方案1】：

您需要在顶部导入它

import * as getKaiAd from "path/to/file"

或

import {getKaiAd} from "path/to/file"

【讨论】：

【解决方案2】：

解决办法是：

首先，在index.html里面添加这个

<script type="text/javascript" src="libs/kaiads.v4.min.js" defer></script>

然后，像这样调用函数：window.getKaiAd

【讨论】：