[解決済み] ReactJSでJQueryを使用する方法

質問

私はReactJSの初心者です。以前は、必要なアニメーションや機能を設定するためにjQueryを使用していました。しかし、今私はReactJSを使用し、jQueryの使用を最小限に抑えようとしています。

私のケースは

私はReactJSでアコーディオンを作ろうとしています。

<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>

JQueryの使用 :

$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});

私の質問です。

ReactJSでこれを行うにはどうしたらよいでしょうか？

どのように解決するのですか？

ReactJSではjQueryはなるべく使わないようにしたほうがいい。しかし、どうしても使いたい場合は、コンポーネントのcomponentDidMount()ライフサイクル関数に入れることになるでしょう。

例

class App extends React.Component {
  componentDidMount() {
    // Jquery here $(...)...
  }

  // ...
}

理想的には、再利用可能なアコーディオンコンポーネントを作成したいものです。そのためには、Jqueryを使うか、あるいは単にjavascriptとCSSを使うことができます。

class Accordion extends React.Component {
  constructor() {
    super();
    this._handleClick = this._handleClick.bind(this);
  }

  componentDidMount() {
    this._handleClick();
  }

  _handleClick() {
    const acc = this._acc.children;
    for (let i = 0; i < acc.length; i++) {
      let a = acc[i];
      a.onclick = () => a.classList.toggle("active");
    }
  }

  render() {
    return (
      <div 
        ref={a => this._acc = a} 
        onClick={this._handleClick}>
        {this.props.children}
      </div>
    )
  }
}

そして、このように任意のコンポーネントで使用することができます。

class App extends React.Component {
  render() {
    return (
      <div>
        <Accordion>
          <div className="accor">
            <div className="head">Head 1</div>
            <div className="body"></div>
          </div>
        </Accordion>
      </div>
    );
  }
}

Codepenのリンクはこちらです。 https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (このリンクはhttpsに変更しました^)