Блог

У меня есть компонент react, который содержит 3D-анимацию с элементами управления воспроизведением (пауза/воспроизведение) внутри HTML-страницы, и мне нужно, чтобы элементы управления синхронизировались с некоторыми кнопками за пределами компонента react.
Элементы управления в react реализованы следующим образом

 <Button  color='red' onClick={() => { setDataPlayback(false); }} >  <Icon name='pause' /></Button>
<Button color='red' onClick={() => { setDataPlayback(true); }} >  <Icon name='play' /> </Button>
 

и кнопки на html — странице являются

 <div id="btns">
    <button id="html-button-pause" onclick="python_function_pause()"></button>
    <button id="html-button-play" onclick="python_function_play()"></button>
</div>
 

Поэтому всякий раз, когда я нажимаю кнопку в react, я хочу, чтобы она вызывала нажатие на кнопку html.

Я думаю, что это должно сработать:

 <Button  color='red' onClick={() => { setDataPlayback(false); python_function_pause(); }} >  <Icon name='pause' />
 

И то же самое для другой кнопки. Вы можете вызвать click HTML-элемент программно, используя .click() функцию. Вы можете прочитать больше об этом здесь.