Question

我正在尝试在我的网站中使用外部第三方脚本文件outgrow.co。我的网站基于reactjs。该脚本文件应该会生成一个按钮。我已经使用html代码尝试了此脚本，并且可以正常工作，但不适用于我的reactjs代码。这是我要添加的代码：

 <div>
                <div id='5cbead6c7771f625d56e46f0' data-embedCookieDays='10' data-embedScheduling='false' data-embedTimed='true' data-embedExit='false' data-embedTimeFormat='0' data-embedTimeValue='5' data-embedBorderRadius='0' data-embedFontSize='13' data-textcolor='#ffffff' data-bgcolor='#fb545b' data-prop='outgrow-p' data-type='outgrow-b' data-url='https://arafathossain571.outgrow.us/5cbead6c7771f625d56e46f0?q=1' data-text='Get Started'></div>
                <script src='//dyv6f9ner1ir9.cloudfront.net/assets/js/nploader.js'></script><script>initIframe('5cbead6c7771f625d56e46f0');</script>
            </div>

这是我尝试过的：

 componentDidMount () {



        const script = document.createElement("script");


        (function(){

            <div>
                <div id='5cbead6c7771f625d56e46f0' data-embedCookieDays='10' data-embedScheduling='false' data-embedTimed='true' data-embedExit='false' data-embedTimeFormat='0' data-embedTimeValue='5' data-embedBorderRadius='0' data-embedFontSize='13' data-textcolor='#ffffff' data-bgcolor='#fb545b' data-prop='outgrow-p' data-type='outgrow-b' data-url='https://arafathossain571.outgrow.us/5cbead6c7771f625d56e46f0?q=1' data-text='Get Started'></div>
                <script src='//dyv6f9ner1ir9.cloudfront.net/assets/js/nploader.js'></script><script>initIframe('5cbead6c7771f625d56e46f0');</script>
            </div>
        })();


        document.body.appendChild(script);
    }

Answer 1

您应该这样做：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="container commonDivInvoice">
  <div class="row tableInvoice" id="commonDvScroll">
    <table class="table table-bordered" id="tableInvoice">
      <thead>
        <tr>
          <th id="itemNameth" class="commanth">Item Name</th>
          <th id="itemCodeth" class="commanth">Item Code</th>
          <th id="unitQtyth" class="commanth">Unit Qty</th>
          <th id="purRateth" class="commanth">Pur.Rate</th>
          <th id="discPercentageth" class="commanth">Disc%</th>
          <th id="discAmtth" class="commanth">Disc Amt</th>
          <th id="gstPercentageth" class="commanth">Gst%</th>
          <th id="gstAmtth" class="commanth">Gst Amt</th>
          <th id="totalAmtth" class="commanth">Total Amount</th>


        </tr>
      </thead>
      <tbody>


      </tbody>

    </table>

  </div>
</div>

reactjs中的第三方脚本文件

1 个答案: