<script> 标签中的内容到 ReactJS 组件

Question

这里是我在HTML中的代码，这里我需要把脚本部分拿出来修改成ReactJS，再次作为脚本源在html中使用。因为，我以 html 本身开始，并且是 React 的新手。

<script>
  function idbOK() {
      return "indexedDB" in window;  //check whether indexeddb is supported in the browser
  }
  var db;
  var key = 100;
  $(document).ready(function() {
      if(!idbOK()) return; 
      var DBopenRequest = indexedDB.open("ora_idb3",1); 
      DBopenRequest.onupgradeneeded = function(e) {  
          var thisDB = e.target.result;
          console.log("running onupgradeneeded"); 

          if(!thisDB.objectStoreNames.contains("notes")) {  
              var notesOS = thisDB.createObjectStore("notes", {autoIncrement: true}) 
              console.log("makng a new object store notes");
              notesOS.createIndex("title","title",{unique: false});
          }
      }

      DBopenRequest.onsuccess = function(e) {  
          console.log("running onsuccess");
          db = e.target.result;
          getNote();
          $('#note').on('input propertychange change', function(){
            addNote();
         })

      }

      DBopenRequest.onerror = function(e) { 
          console.log("onerror!");
          console.dir(e);
      }

  });
</script>

我想将代码更改为 ReactJS。我是 ReactJS 的新手，发现移动起来很复杂。

Answer 1

您可以通过以下方法完成此操作：

const dbSetupScript = `function idbOK() {
  return "indexedDB" in window;  //check whether indexeddb is supported in the browser
}
var db;
var key = 100;
$(document).ready(function() {
  if(!idbOK()) return; 
  var DBopenRequest = indexedDB.open("ora_idb3",1); 
  DBopenRequest.onupgradeneeded = function(e) {  
      var thisDB = e.target.result;
      console.log("running onupgradeneeded"); 

      if(!thisDB.objectStoreNames.contains("notes")) {  
          var notesOS = thisDB.createObjectStore("notes", {autoIncrement: true}) 
          console.log("makng a new object store notes");
          notesOS.createIndex("title","title",{unique: false});
      }
  }

  DBopenRequest.onsuccess = function(e) {  
      console.log("running onsuccess");
      db = e.target.result;
      getNote();
      $('#note').on('input propertychange change', function(){
        addNote();
     })
  }

  DBopenRequest.onerror = function(e) { 
      console.log("onerror!");
      console.dir(e);
  }
});`;

注意：如果你想要一些变量值，可以在 dbSetupScript 字符串中使用 ${variable_name} 语法。

然后从 React 组件的 render 方法你可以做以下事情

<script dangerouslySetInnerHTML={{__html: dbSetupScript}} />

<script> 标签中的内容到 ReactJS 组件

content in <script> tag to ReactJS component

html

javascript

jquery

indexeddb

reactjs