Реакт и Гэтсби: примените кладку css / js к некоторым страницам - PullRequest
Новая
       23

Реакт и Гэтсби: примените кладку css / js к некоторым страницам

0 голосов
/ 02 марта 2020

Я очень мало знаю о React, просто пытаюсь запустить портфолио Gatsby с индексной страницей и шаблоном, который создает страницы с тегами. Я хотел применить эту кладку css / js к моим индексным и помеченным страницам https://codepen.io/didumos/pen/xNPKRJ

Но я не уверен, что лучший подход. Хотел бы я разбить JS на файл utils. js и импортировать его в index. js и taggedtemplate. js? Он довольно длинный и имеет некоторые функции load / on refre sh. Коллега сказал мне, чтобы использовать крючки, но не знаю, как.

любой совет приветствуется! спасибо!

ох, стековый поток говорит мне, что мне нужно вставить код в код при ссылке на кодовую ручку. Вот 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);

1 Ответ

1 голос
/ 03 марта 2020

Я не могу быть точным здесь, потому что я не уверен, в чем именно проблема. Но, взглянув на код, вы, кажется, должны предпринять небольшие шаги в своем путешествии, чтобы отреагировать. Вы бы хотели как можно больше избегать запросов к dom и манипуляций с dom, в том числе getElementsByClassName, о котором знает каждый новичок, но использование его в контексте реакции в большинстве случаев причинит вам боль.

Ваш colleauge был прав насчет хуков, и вы должны использовать их всякий раз, когда у вас есть addEventListener, вы бы хотели обернуть их в useEffect, чтобы предотвратить выполнение сотен или тысяч addEventListener.

Есть гэтсби плагин для эмоций, который я часто использую для css. Но в поисках каменной кладки я сомневаюсь, что он предназначен для реакции, за исключением того, что для него есть специальный плагин c, тогда вам может повезти больше. В противном случае, удачи!

...