Javascript 如何使用reactjs和webpack使用slideout.js

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

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

---

您可以在Header.js页面的ComponentWillMount中使用它。ComponentWillMount是一个Reactjs组件生命周期，它将在呈现页面之前执行。

只需将其添加到组件的componentDidMount方法中即可。componentDidMount是在第一次渲染后触发的，因此元素那时已经在DOM上了

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

---

React用于在html文档呈现之前管理VDOM。尝试将控件用于虚拟节点。 `

componentDidMount（）{
this.slideout=新的slideout({
“面板”：此.refs.\u面板，
“菜单”：此.refs.\u菜单，
“填充”：256，
‘容忍度’：70
})
}
render（）{
返回(
菜单
面板
)
}

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

componentDidMount() {
    this.slideout = new Slideout({
      'panel': this.refs._panel,
      'menu': this.refs._menu,
      'padding': 256,
      'tolerance': 70
    })
  }
  render() {
    return (
      <div>
        <nav ref="_menu">
            <header>
              <h2>Menu</h2>
            </header>
        </nav>
        <main ref="_panel">
            <header>
              <h2>Panel</h2>
            </header>
        </main>
      </div>
    )
  }