如何在 React/Preact 应用程序中 运行 常规 JavaScript

Question

我正在尝试在 Preact 应用程序中使用砌体，尝试 several React plugins 使用 react/compat 但它们都失败了。

这就是我正在尝试的方式：

const App = () => (
  <Landing name="shoecare">
    <!-- all the working code -->

    <!-- here -->
    <script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
    <script>
    var grid = document.querySelector(".how__list");
    new Masonry(grid, {
      itemSelector: ".how__item",
      columnWidth: document.querySelctor('body').clientWidth / 2 - 16,
    });
    </script>
    <!-- end -->
  </Landing>
);

clab(<App />);

但是编译失败：

可能吗？

我设法 运行 一些常规的 JS onclick，就像这样；

<span class="services__nav-previous" onClick={(e) => scrollLeft()}>

Answer 1

我猜你正在使用功能组件，所以要在其中包含任何 js 代码，你应该这样做

const App = () => {
  // your js code here
  return (
  // here you put your components
  )
}

编辑：并且您没有将 放入您的功能组件中，您将它们添加到您的 index.html 文件中，而不是 app.js