Javascript React和Gatsby：将css/js应用于某些页面

我对React知之甚少，只是想让盖茨比的投资组合运行起来，有一个索引页面和一个制作标记页面的模板。我想将这个css/js应用于我的索引和标记页面

但我不确定最好的方法是什么。我想将JS分解成一个utils.JS文件，并将其导入index.JS和taggedtemplate.JS吗？它相当长，有一些加载/刷新功能。一位同事告诉我要用钩子，但不知道怎么用

任何建议，谢谢！谢谢大家!

噢，stackoverflow告诉我，当链接到代码笔时，我需要输入过去的代码。这是根据代码笔改编的JS

const minColWidth = 500;
let roots;

function onLoad() {
  var rootElements = document.getElementsByClassName('indexWrapper');
  roots = Array.prototype.map.call(rootElements, function(rootElement) {
    var cellElements = rootElement.getElementsByClassName('item');
    var cells = Array.prototype.map.call(cellElements, function(cellElement) {
      var style = getComputedStyle(cellElement);
      return {
        'element': cellElement,
        'outerHeight': parseInt(style.marginTop) + cellElement.offsetHeight + parseInt(style.marginBottom)
      };
    });
    return {
      'element': rootElement,
      'noOfColumns': 0,
      'cells': cells
    };
  });

  // do the first layout
  onResize();
}

function onResize() {
  for (let root of roots) {
    // only layout when the number of columns has changed
    var newNoOfColumns = Math.floor(root.element.offsetWidth / minColWidth);
    if (newNoOfColumns != root.noOfColumns) {

      // initialize
      root.noOfColumns = newNoOfColumns;
      var columns = Array.from(new Array(root.noOfColumns)).map( function(column) {
        return {
          'cells': new Array(),
          'outerHeight': 0
        };
      });

      // divide...
      for (let cell of root.cells) {
        var minOuterHeight = Math.min(...columns.map( function(column) {
          return column.outerHeight;
        }));
        var column = columns.find( function(column) {
          return column.outerHeight == minOuterHeight;
        });
        column.cells.push(cell);
        column.outerHeight += cell.outerHeight;
      }

      // calculate masonry height
      var masonryHeight = Math.max(...columns.map( function(column) {
        return column.outerHeight;
      }));

      // ...and conquer
      var order = 0;
      for (let column of columns) {
        for (let cell of column.cells) {
          cell.element.style.order = order++;
          // set the cell's flex-basis to 0
          cell.element.style.flexBasis = 0;
        }
        // set flex-basis of the last cell to fill the
        // leftover space at the bottom of the column
        // to prevent the first cell of the next column
        // to be rendered at the bottom of this column
        column.cells[column.cells.length - 1].element.style.flexBasis = column.cells[column.cells.length - 1].element.offsetHeight + masonryHeight - column.outerHeight - 1 + 'px';
      }

      // set the masonry height to trigger
      // re-rendering of all cells over columns
      // one pixel more than the tallest column
      root.element.style.maxHeight = masonryHeight + 1 + 'px';

      console.log(columns.map( function(column) {
        return column.outerHeight;
      }));
      console.log(root.element.style.maxHeight);
    }
  }
}

// subscribe to load and resize events
window.addEventListener('load', onLoad);
window.addEventListener('resize', onResize);

---

我在这里不能精确，因为我不确定确切的问题是什么。但是看看代码，您似乎需要在进入react的过程中采取更小的步骤。您可能希望尽可能避免dom查询和dom操作，这包括

GetElementsByCassName

，每个初学者都知道这一点，但是在react的上下文中使用它会让您感到痛苦

你的同事关于钩子的看法是正确的，你应该在你有

addEventListener

的时候使用它们，你会希望有效地包装它们，以防止成百上千的

addEventListener

被执行

---

有一个关于情绪的盖茨比插件，我在css中经常使用它。但在搜索砌体时，我怀疑它是否是为react设计的，除非有一个特定的插件，那么你在那里可能会更幸运。否则，祝你好运

阅读您发布的代码，我发现您有两个函数可以与React hook一起使用：

onLoad

和

onResize

。 如果将组件导出为类，则应在

componentDidMount（）

lifecycle钩子中使用onLoad方法；如果将组件导出为函数，则应在

React.useffect（）

中使用onLoad方法。这样，您的javascript代码将在呈现DOM后立即启动。

---

至于在调整大小时重新加载msonry布局，您可以在上面提到的生命周期挂钩中使用

window.addEventListener（'resize'，onResize）

。

对不起，我的问题有点模糊，我想我是在问如何将代码分解成挂钩。