可以在react组件中运行自定义javascript标记吗？_Javascript_Html_Reactjs

可以在react组件中运行自定义javascript标记吗？

javascript html reactjs

可以在react组件中运行自定义javascript标记吗？,javascript,html,reactjs,Javascript,Html,Reactjs,抱歉，如果这是非常基本的，因为我是一个完全的反应初学者，我在这里问这个问题，因为我不知道从哪里开始工作我正在尝试将这个原始html代码转换为react应用程序 <body> <div style="width: 600px; height: 400px;" id="aww-wrapper"> </div> <script src="https://awwapp.com/stati

抱歉，如果这是非常基本的，因为我是一个完全的反应初学者，我在这里问这个问题，因为我不知道从哪里开始工作

我正在尝试将这个原始html代码转换为react应用程序

<body>
    <div style="width: 600px; height: 400px;" id="aww-wrapper">
    </div>
    <script src="https://awwapp.com/static/widget/js/aww3.min.js">
    </script>
    <script type="text/javascript">
        var aww = new AwwBoard('#aww-wrapper', {
        });
    </script>
</body>


var aww=新aww板（“#aww包装器”{
});

此代码在网页上创建一个小白板应用程序

我曾尝试在react中将其实现到应用程序组件中，但在让“var aww=…”脚本正常工作时遇到了问题

import React from 'react';
import './App.css';
import ScriptTag from 'react-script-tag'

function App() {
  return (
    <div className="App">

      <div style={{width:'600px', height:'400px'}} id="aww-wrapper">
      </div>

      <ScriptTag src="https://awwapp.com/static/widget/js/aww3.min.js" />

      <ScriptTag type="text/javascript">
        var aww = new AwwBoard('#aww-wrapper', {
        });
      </ScriptTag>

    </div>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
从“反应脚本标记”导入脚本标记
函数App（）{
返回(
var aww=新aww板（“#aww包装器”{
});
);
}
导出默认应用程序；

我正在使用scripttag将外部javascript获取到web页面上，但是对于“var aww=…”部分它不起作用

如果任何人都有一个大致的方向可以指导我，以便在react代码中实现javascript，这将是一个巨大的帮助。

如果你将aww3.min.js捆绑到你的应用程序中，然后执行以下操作会更好：

从“React”导入React；
从“react”导入{useffect}；
导入“/App.css”；
导入“./aww3.min.js”
函数App（）{
useffect（（）=>{
新aww板（“#aww包装器”{
});
}, [])
返回(
);
}
导出默认应用程序；

您需要为AwwBoard创建一个初始化函数包装器。该函数将创建和配置一个对象。AwwBoard函数将向调用者返回一个承诺，一旦javascript执行完毕，调用者将提供AwwBoard实例供以后使用（访问其方法）

我们还希望传递配置参数以及组件的mount Ref

为了实现这一点，我创建了以下函数，该函数采用ref（对于要安装AwwBoard的div）和配置参数。它加载脚本，并用实例解析承诺

const AwwBoard = (mountRef: React.Ref, params: Object = {}) => {
  let promise = new Promise(function (resolve, reject) {
    var script = document.createElement("script");
    script.src = "https://awwapp.com/static/widget/js/aww3.min.js";

    script.onload = function () {
      //AwwBoard should be available on the window object after loading the script
      const { AwwBoard } = window;
      //create a new instance
      var aww = new AwwBoard(`#${mountRef.id}`, params);
      //resolve the promise and return the instance.
      resolve(aww);
    };

    document.getElementsByTagName("head")[0].appendChild(script);
  });

  return promise;
};

export default AwwBoard;

现在，我们用react ref和useEffect设置了一个div，它将AwwBoard加载到“componentDidMount”上

import React，{useffect}来自“React”；
导入“/styles.css”；
从“/AwwBoard”导入AwwBoard；
导出默认函数App（）{
const awwBoardInstance=React.useRef（）；//此处板上的访问方法
const awwBoardMountRef=React.useRef（null）；//AwwBoard的挂载引用
useffect（（）=>{
AwwBoard（awwBoardMountRef.current，{}）。然后（（实例）=>{
awwBoardInstance.current=实例；
});
},[]);
返回(
);
}

您希望在这里实现什么？为什么不简单地使用jsx呢

{var aww=newawwboard（“#aww wrapper'，{}）}

而不是直接在

脚本标记下使用。创建一个新的js文件，并将所有AwwBoard代码放在其中。使用
Hi messerbill，我尝试过使用该实现，但代码返回“AwwBoard未定义”，我认为这是因为react试图在从awwapp.com获取外部js文件之前对其进行编译。你处理过这个问题吗？你好，谢谢你的回复，我已经尝试过实现这个功能，但我需要从外部获取aww.min.js文件，而不是将其托管在我的应用程序中。但是，即使我从外部获取文件，newawwboard…code返回的'AwwBoard'没有定义，我认为这本身就是一个不同的问题，我不知道为什么这段代码可以在脚本标记中工作，但在useEffect中实现时却不能。如果你从外部抓取文件，你必须等到脚本被评估并在全局可见性区域中注册AwwBoard。这就是为什么你有一个“未定义的”感谢你的帮助！这是完美的工作，它是整理的承诺，固定它。
import React, { useEffect } from "react";
import "./styles.css";
import AwwBoard from "./AwwBoard";

export default function App() {
  const awwBoardInstance = React.useRef(); //access methods on the board here
  const awwBoardMountRef = React.useRef(null); //mounting ref for the AwwBoard

  useEffect(() => {
    AwwBoard(awwBoardMountRef.current, {}).then((instance) => {
      awwBoardInstance.current = instance;
    });
  },[]);

  return (
    <div className="App">
      <div
        style={{ width: "600px", height: "400px" }}
        id="aww-wrapper"
        ref={awwBoardMountRef}
      ></div>
    </div>
  );
}