Início / coding / Perguntas / 79253643
Accepted
MeltingDog
Asked: 2024-12-05 14:50:12 +0800 CST

Como chamar uma função Vanillas JS que está dentro de outra função Vanillas JS no React?

  • 772

Tenho um componente React que fica dentro de uma página web normal (portanto, não é um SPA).

Há uma função Vanilla JS, dentro de outra função JS, nesta página da web que desejo chamar de dentro do meu componente React. Esta função se parece com:

const getInfo = (() => {
  const updateInfo = (dataId) => {
    //Do something
  }
  const showInfo = (dataId) => {
    //Do something
  }
  return {updateInfo, showInfo}
})();

E eles são chamados nas páginas da web (normais) como:

getInfo.updateInfo("1324");

Agora, quero incluir isso no meu componente React. Então, criei uma função auxiliar, simplesmente copiando o acima.

const getInfo = (() => {
  const updateInfo = (dataId) => {
    //Do something
  }
  const showInfo = (dataId) => {
    //Do something
  }
  return {updateInfo, showInfo}
})();

E chamando-o de dentro de outra função auxiliar, como de costume:

const calculate = () => {
   getInfo.updateInfo("1324");
   // Other React helper function stuff
}

Porém quando tento compilar recebo o erro

getInfo.updateInfo não é uma função

Alguém sabe como posso usar getInfo.updateInfo();as funções auxiliares do meu componente React?

javascript

2 respostas

  1. Best Answer

    Uma das maneiras de fazer isso é anexar isto ao objeto window. No seu script vanilla js:

    const getInfo = (() => {
  const updateInfo = (dataId) => {
    //Do something
  }
  const showInfo = (dataId) => {
    //Do something
  }
  const getInfoObject = {updateInfo, showInfo};
  window.getInfo = getInfoObject;
  return window.getInfo;
})();

    E agora window.getInfoestá disponível para qualquer um usar. Você pode usá-lo em seu componente React.

    • 1

  2. Infelizmente, você não forneceu informações completas sobre a estrutura do seu componente, então é provável que ninguém consiga lhe dar uma resposta definitiva. Se essa função for definida fora do componente, ela deve ser importada diretamente ou passada para o componente como props para ser acessada. Se você estiver usando uma função auxiliar, precisa garantir que ela receba os parâmetros necessários; caso contrário, o React não reconhecerá o que getInfo.updateInfo() é e lançará um erro.

    • -2

relate perguntas