如何在 React 中加載和運行外部 Javascript 代碼，這些代碼在應用程序中而不是在導入的文件中定義？

Question

基本上，我正在嘗試運行 function，它基於外部 javascript 文件創建並添加配方 class 到 React 中的數組 - 但所有的 React 應用程序定義都在里面。

外部文件看起來像（Recipes.js）這樣：

function LoadRecipes(){
   
   AddToRecipes(new Recipe({
    name: "Kronyxium Core",
    components: [],
    requirements: [],
    craftedAt: "Frost Temple Smithy"
  }));
   
}

我嘗試 go 的方式如下：

import React, {useState, useEffect} from 'react';

import RecipeManager from "../logic/RecipeManager.js";
  const Recipe = RecipeManager.Recipe;
  const recipesList = RecipeManager.recipesList;
  const AddToRecipes = RecipeManager.AddToRecipes;

function RecipeController() {

  const [loadingRecipes, setLoadingRecipes] = useState(true);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://raw.githack.com/Soralei/extern/main/Recipes.js";
    script.async = true;

    script.onload = () => {
      setLoadingRecipes(false);
    }

    document.body.appendChild(script);

  }, []);

  useEffect(() => {
    if(!loadingRecipes){
      window.LoadRecipes();
    }
  }, [loadingRecipes]);

  return (
      <div>
        {loadingRecipes ? <p>Loading recipes...</p> : (
          <>
            <p>Recipes:</p>
            {/*recipesList.map((a, index) => <p key={"r"+index}>{a.name}</p>)*/}
          </>
        )}
      </div>
  )
}

export default RecipeController

請注意，導入腳本后，我嘗試使用 window.LoadRecipes() 運行 function。 但是，運行 function 時出現未定義的錯誤：

Recipes.js:3 Uncaught ReferenceError: AddToRecipes is not defined
    at LoadRecipes (Recipes.js:3)

為了清楚起見，我還添加了 RecipeManager.js 的內容。 這是本地邏輯，目標是讓外部 function 使用它：

class Recipe{
    constructor(options = {}){
        this.name = options.name || "Unnamed Recipe";
        this.components = options.components || [];
        this.requirements = options.requirements || [];
        this.craftedAt = options.craftedAt || "handcrafted";
    }
}

const recipesList = [];

function AddToRecipes(Recipe){
    recipesList.push(Recipe);
    console.log(Recipe.name, "was added to the recipes list.");
}

const exported = {
    Recipe: Recipe,
    recipesList: recipesList,
    AddToRecipes: AddToRecipes
}

export default exported;

這是不可能的，還是我這樣做完全錯了？

我為什么要這樣做？ 這個想法是以一種允許其他人輕松查看、編輯和讓更改直接影響我的應用程序的方式在線托管食譜，同時將大部分工作保留在 React 應用程序中。

Answer 1

您必須導出 function 才能訪問它。

默認導出（每個文件只有一個）：

function LoadRecipes(){
   AddToRecipes(new Recipe({
    name: "Kronyxium Core",
    components: [],
    requirements: [],
    craftedAt: "Frost Temple Smithy"
  }));
}

export default LoadRecipes; // export

你應該像這樣導入它：

import LoadRecipes from 'pathtofile';

命名導出（多個）：

export function LoadRecipes() {
  AddToRecipes(new Recipe({
    name: "Kronyxium Core",
    components: [],
    requirements: [],
    craftedAt: "Frost Temple Smithy"
  }));
}

export const add (a, b) => a + b; // another one

像這樣導入（使用 { }）：

import {
  LoadRecipes,
  add
} from 'pathtofile';

命名導出對於導出多個值很有用。 在導入期間，可以使用相同的名稱來引用相應的值。 關於默認導出，每個模塊只有一個默認導出。 默認導出可以是 function、class、object 或其他任何東西。 該值將被視為“主要”導出值，因為它將是最容易導入的值。

您可以在此處閱讀有關 JavaScript 模塊的信息