reactjsとwebpackを使用してslideout.jsを使用する方法

Question

Slideout.jsライブラリは、ページの読み込み時に実行するよう要求しています。しかし、私はどのように私の反応jsxコードでこのカスタムJSコードを書くことができます理解できません。

<script> 
    var slideout = new Slideout({ 
    'panel': document.getElementById('panel'), 
    'menu': document.getElementById('menu'), 
    'padding': 256, 
    'tolerance': 70 
    }); 
</script> 

はhttps://slideout.js.orgのドキュメントを1として、私は私のhtmlファイルやJSファイルのコードの上に書き留めする必要があります。このコードをJSXファイルに書き込むか、jsファイルに書き込む方法を教えてください。

import React from 'react'; 
import { Router} from 'react-router' 
import { BrowserRouter, Route, Link } from 'react-router-dom' 
import slideout from 'slideout'; 

class Header extends React.Component { 

    render() { 
    return (
     <div> 
      <nav id="menu"> 
       <header> 
        <h2>Menu</h2> 
       </header> 
      </nav> 

      <main id="panel"> 
       <header> 
        <h2>Panel</h2> 
       </header> 
      </main> 
     </div> 
     ); 
    } 
} 

export default Header; 

Answer 1

コンポーネントのcomponentDidMountメソッドに追加するだけです。最初のレンダリングの後にcomponentDidMountがトリガされるため、要素はすでにDOM上に存在しています。

componentDidMount() { 
    this.slideout = new Slideout({ 
    'panel': document.getElementById('panel'), 
    'menu': document.getElementById('menu'), 
    'padding': 256, 
    'tolerance': 70 
    }); 
} 

Answer 2

あなたはHeader.jsページにComponentWillMountでそれを使用することができますが、次のように

Header.jsのための私のコードです。 ComponentWillMountは、ページをレンダリングする前に実行するReactjsコンポーネントライフサイクルです。