將回調 function 傳遞給渲染的反應組件

Question

我有一個在舊版 html 頁面上調用/渲染的反應組件。 如何在舊版 html 頁面中調用 javascript function？

====== 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);

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

Answer 1

您可以使用 window.buttonClicked() 使用window object 調用它。