个人中心
gpt4 book ai didi

javascript - 我如何将 VaniilaJS 嵌入到 React 中？

转载 作者：行者123 更新时间：2023-12-05 04:55:15 25 4
gpt4 key购买 nike

我有想要使用的开源库。该库用干净的 vanilla js 编写:如果我想使用该库，请遵循他们的文档:

<html>
    <head>
        <script src="./jquery-2.0.3.min.js"></script>
        <script src="./kinetic-v5.1.0.min.js"></script>
        <script src="./inchlib-1.2.0.js"></script>
        <script>
        $(document).ready(function() { //run when the whole page is loaded
            var inchlib = new InCHlib({"target": "inchlib",
                            "width": 800,
                            "height": 1200,
                            "column_metadata_colors": "RdLrBu",
                            "heatmap_colors": "RdBkGr",
                            "max_percentile": 90,
                            "middle_percentile": 60,
                            "min_percentile": 10,
                            "heatmap_font_color": "white",
                             text: 'biojs'});
        inchlib.read_data_from_file("/microarrays.json");
        inchlib.draw();

    inchlib.onAll(function(name){
        console.log(name + " event triggered");
    });

});
        </script>
    </head>

    <body>
        <div class="heatmaps" style="margin:auto; align-items: center; margin-left:25%;">
            <div id="inchlib"></div>
        </div>
        <div ></div>
    </body>
 </html>

文件inchlib-1.2.0.js包含主要逻辑和js代码。我想构建 react 项目并在那里使用这个库。我怎样才能实现这个目标？

import React, { Component } from 'react';
import './App.css';

export default class App extends Component {
  render () {
    return (
   <div>
      <div>
      </div>
   </div>
)
  }
}

最佳答案

您可以使用 useEffect 创建自定义钩子(Hook)。在 useEffect 中，您应该粘贴您的代码。您可以插入 html 元素，添加事件监听器等。

useLibrary.js

import { useEffect } from "react";

const useLibrary = () => {

  useEffect(() => {
    $.getScript("inchlib-1.2.0.js", function(){
       var inchlib = new InCHlib({"target": "inchlib",
                          "width": 800,
                          "height": 1200,
                          "column_metadata_colors": "RdLrBu",
                          "heatmap_colors": "RdBkGr",
                          "max_percentile": 90,
                          "middle_percentile": 60,
                          "min_percentile": 10,
                          "heatmap_font_color": "white",
                           text: 'biojs'});
      inchlib.read_data_from_file("/microarrays.json");
      inchlib.draw();
      inchlib.onAll(function(name){
          console.log(name + " event triggered");
      });
    });
  }, []);


};

export default useLibrary;


App.js

import useLibrary from ".useLibrary";
export default class App extends Component {
  useLibrary();
  render () {
    return (
   <div>
      <div class="heatmaps" style="margin:auto; align-items: center; margin-left:25%;">
        <div id="inchlib"></div>
      </div>
   </div>
)
  }
}

但我警告你，这是一个大拐杖。

关于javascript - 我如何将 VaniilaJS 嵌入到 React 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65459254/

25 4 0
文章推荐： python - 如何将 dunder 方法 monkeypatch 到现有实例？
文章推荐： postgresql - 测试容器和错误 : "Failed to validate connection org.postgresql.jdbc.PgConnection" (raising a single container for all test classes)
文章推荐： php - 如何修复 Laravel 8 测试中的 "419 - Page expired"错误？
文章推荐： android oreo 在服务中获取来电号码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com