将回调函数传递给渲染的反应组件答案

【问题标题】：Passing a callback function to a rendered react component将回调函数传递给渲染的反应组件
【发布时间】：2021-01-20 14:51:36
【问题描述】：

我有一个在旧版 html 页面上调用/呈现的反应组件。如何在旧版 html 页面中调用 javascript 函数？

====== contents from html file ======
<script>
       function buttonClicked(){
          console.log('buttonClicked');
       }
</script>
<div id="sample-react-component"> 
</div>

==================================
=======Contents from JSX =========

class Foo extends Component {
  handleClick = () => {

     //
     // how do I call buttonClicked here?
     //
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

const domContainer = document.querySelector('#sample-react-component');
ReactDOM.render(<Foo/>, domContainer);

================================================ ===

【问题讨论】：

只需致电buttonClicked()？它应该在全局范围内可用
是否可以将 buttonClicked 的引用作为参数传递给 react 组件？

标签： javascript reactjs jsx

【解决方案1】：

您可以使用 window.buttonClicked() 使用 window 对象调用它。

【讨论】：