javascript - 如何使用 reactjs 和 webpack 使用 slideout.js

Question

Slideout.js 库要求您在页面加载时执行它。但是我无法理解在我的 React jsx 代码中在哪里以及如何编写此自定义 JS 代码。

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

根据 https://slideout.js.org 上的文档我需要在我的 html 文件或 JS 文件中写下上面的代码。请告诉我如何在我们的 JSX 或 react js 文件中编写此代码。

我的Header.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
  });
}