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

编程问答 2022-05-27

问题描述

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

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

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 />);

但是编译失败：

enter image description here

可以吗？

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

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

解决方法

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

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

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

javascriptpreactreactjsreactjsreactjsreactjs