Блог

Главная - Вопросы по программированию - Передача функции обратного вызова отображаемому компоненту react

Передача функции обратного вызова отображаемому компоненту react

#javascript #reactjs #jsx

#javascript #reactjs #jsx

Вопрос:

У меня есть компонент react, который я вызываю / визуализирую на устаревшей HTML-странице. Как заставить react вызывать функцию javascript на устаревшей HTML-странице?

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

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

Комментарии:

1. просто вызвать buttonClicked() ? он должен быть доступен в глобальной области видимости

2. Возможно ли передать ссылку на buttonClicked в качестве аргумента в компонент react?

Ответ №1:

Вы можете вызвать его с помощью window object с помощью window.buttonClicked() .

Метки: