Как использовать функцию slideToggle в React?

Question

Я пытаюсь преобразовать эту функцию javascript как есть в язык реакции.

$("#compare-btn").click(function(){
        $(".compare-show").slideToggle("slow");
    });

Все, что я хочу сделать, - это сделать слайд div на странице и приклеить нижнюю часть, как только я нажму на кнопку «Сравнить». Есть идеи, как мне этого добиться?

Answer 1

Ваш пример в React должен быть:

import React from 'react';
import $ from 'jquery';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.compareShow = React.createRef();
    this.slideToggle = this.slideToggle.bind(this);
  }

  slideToggle() {
    $(this.refs.compareShow.current).slideToggle();
  }

  render() {
    return (
      <React.Fragment>
        <button onClick={this.slideToggle}>Toggle</button>
        <div ref={this.compareShow} />
      </React.Fragment>
    );
  }
}