Chrome 反应扩展答案

【问题标题】：Chrome React extensionChrome 反应扩展
【发布时间】：2018-10-25 13:48:08
【问题描述】：

无法在react app中添加外部JS。我需要在Div标签后添加JS但找不到方法。

class Main extends React.Component {
render() {
    return (
        <Frame head={[<link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/content.css")} ></link>,
         <script src="https://code.jquery.com/jquery-1.12.4.js"></script>,
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>,
 <script src="custom.js" type="text/javascript"></script>
        ]}> 
           <FrameContextConsumer>
           {
           // Callback is invoked with iframe's window and document instances
               ({document, window}) => {
                  // Render Children
                    return (

                        <div className={'my-extension'}>

                         <div>
    <div className="draggable-main">
      <h1>Test</h1>
      <h3> Group 1</h3>
      <div className="box">
        <ul className="connected-sortable draggable-left">
          <li>Test Case 1</li>
          <li>Test Case 2</li>
          <li>Test Case 3</li>
          <li>Test Case 4</li>
          <li>Test Case 5</li>
          <li>Test Case 6</li>
          <li>Test Case 7</li>
        </ul>
      </div>
      <h3>Group 2</h3>
      <div className="box">
        <ul className="connected-sortable draggable-right">
          <li>Test Case 8</li>
          <li>Test Case 9</li>
          <li>Test Case 10</li>
          <li>Test Case 11</li>
          <li>Test Case 12</li>
          <li>Test Case 13</li>
          <li>Test Case 14</li>
        </ul>
      </div>
    </div>
  </div>

</div>

                    )
                }
            }
            </FrameContextConsumer>
        </Frame>
    )
}

在这种情况下，我需要在 div 之后添加 custom.js 以使我的功能正常工作。但不能在那里添加，请提出一些将外部js添加到react组件中的方法。（注：custom.js 使用 jquery）

【问题讨论】：

下载外部 js 并像其他本地脚本一样包含它们，因为直接在扩展的特权环境中加载外部脚本是一个非常糟糕的主意，原因有很多。

标签： javascript jquery reactjs google-chrome-extension react-component

【解决方案1】：

在你的 div 后面的花括号内添加你的代码。

<React.Fragment>
  <div>
   (your code)
  </div>
  {
   Your jquery code
  }
</React.Fragment>

注意：不建议将两个 javascript 框架结合起来，这会导致性能问题。

【讨论】：