Question

我正在尝试将此JavaScript函数直接转换为React语言。

$("#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>
    );
  }
}

如何在React中使用slideToggle函数？

1 个答案: