從反應組件調用外部 Javascript 函數

Question

我不確定之前是否有人問過這個問題，或者有人在 reactjs 上遇到過同樣的問題。 所以場景是這樣的，我有一個包含一些 javascript 的index.html文件。 現在在我的反應組件上，我有一個條件，只有當條件為真時才會呈現。 這意味着最初當我的頁面加載時，組件還沒有被渲染。 當我切換一個按鈕時，這是該組件被渲染的地方。 該子組件需要調用包含在我的 index.html 中的 javascript 方法。 我該怎么做？

任何幫助是極大的贊賞。

Answer 1

在 index.html 中

<script type="text/javascript">
  function test(){
    alert('Function from index.html');
  }
</script>

在您的組件中

componentWillMount() {
  window.test();
}

Answer 2

試試這個解決方案，在啟用 TypeScript 的情況下從 React 調用全局函數：

在 index.html 或 some_site.js 中

function pass_function(){
  alert('42');
}

然后，從您的反應組件：

window["pass_function"]();

當然，您可以傳遞一個參數：

//react
window["passp"]("react ts");

//js
function passp(someval) {
  alert(`passes parameter: ${someval}`);
}

Answer 3

所以要么你在全局范圍（又名窗口）上定義方法。 然后你可以從任何方法中使用它，無論是否是 React。

或者您可以切換到基於模塊的范例並使用 require/import 來獲取模塊並使用該功能。

對於較大的項目，后者更好，因為它可以擴展，而如果您需要演示或 POC，您當然可以將所有內容連接到全局范圍，它會起作用。

有關模塊的更多信息，請訪問： http ://exploringjs.com/es6/ch_modules.html

Answer 4

您可以將您的方法附加到全局窗口對象，然后像在組件中那樣使用它：

<button onClick={this.howItWorks} type="button" className='btn'>How it Works</button>

howItWorks = () => {
  window.HowItWorksVideo();
}

Answer 5

對於打字稿用戶，試試這個：

declare global {
    interface Window {
        externalMethod: (params: any) => void;
    }
}

那么你就可以在你的反應組件中這樣調用它

window.externalMethod(params)