从react组件调用外部Javascript函数

Question

我不确定之前是否曾经问过这个问题,或者是否有人在reactjs上遇到过同样的问题.所以场景是这样的,我有一个包含一些javascript 的index.html文件.现在在我的react组件上,我有一个只有在条件为真时才会呈现的条件.这意味着,最初当我的页面加载时,组件尚未呈现.当我切换按钮时,这是该组件被渲染的地方.该子组件需要调用我的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}`);
}