React - 從外部腳本設置組件 state

Question

我有 React 項目，我想向應用程序添加外部腳本：

<script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<link rel="stylesheet" href="https://geowidget.easypack24.net/css/easypack.css"/>

並調用方法：

<script type="text/javascript">
window.easyPackAsyncInit = function () {
    easyPack.init({});
    var map = easyPack.mapWidget('easypack-map', function(point){
        console.log(point);
    });
};
</script>

<div id="easypack-map"></div>

我是這樣做的：

componentDidMount() {
    const script1 = document.createElement("script");
    script1.src = "https://geowidget.easypack24.net/js/sdk-for-javascript.js";
    script1.async = true;
    document.body.appendChild(script1);

    const script2 = document.createElement("script");
    script2.type = 'text/javascript';
    script2.async = true;
    script2.innerHTML = "window.easyPackAsyncInit = function () {easyPack.init({});var map = easyPack.mapWidget('easypack-map', function (point) {console.log(point);});};";
    document.body.appendChild(script2);
}

它正在工作，但我想在我的組件中使用 function 返回值point （將其用作組件狀態）

Answer 1

選項 1從另一個腳本調用：只需將 this.setState 暴露this.setState上的一個方法並調用該方法將更新它的 state


componentDidMount() {
  window.setPoint = (point)=>this.setState('point',point)
}

// open console and run setPoint(xxx) and check the UI change

選項 2調用公開方法並像您一樣從 react 調用，但情況可能會更好

<script async src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<link rel="stylesheet" href="https://geowidget.easypack24.net/css/easypack.css"/>

你可以將這些添加到你的模板<head>標簽，html文件或webpack中的html插件，添加腳本可能會導致重復

那么你只需要

componentDidMount() {
    easyPack.init({});
    var map = easyPack.mapWidget('easypack-map', (point)=>{
        console.log(point);
        this.setState('point',point)
    });

Answer 2

好的，我找到了解決方案。 在function中設置window.point，然后在Component中讀取window.point

script2.innerHTML = "window.easyPackAsyncInit = function () {easyPack.init({});var map = easyPack.mapWidget('easypack-map', function (point) {window.point = point);});};";

但這是最好的解決方案嗎？

React - 從外部腳本設置組件 state

問題描述

2 個解決方案

解決方案1
1 已采納 2020-12-02 12:38:47

解決方案2
0 2020-12-02 12:21:12

React - 從外部腳本設置組件 state

問題描述

2 個解決方案

解決方案1 1 已采納 2020-12-02 12:38:47

解決方案2 0 2020-12-02 12:21:12

解決方案1
1 已采納 2020-12-02 12:38:47

解決方案2
0 2020-12-02 12:21:12