Задать вопрос

lilroy

Лайки

  • Как пробросить ref в компонент который выводится через map?

    @HealSpirit
    Так?
    import { FC, useRef } from "react";

const data: { id: number; name: string }[] = [
  {
    id: 1,
    name: "Первый"
  },
  {
    id: 13,
    name: "Тринадцатый"
  },
  {
    id: 20,
    name: "Двадцатый"
  }
];

const App: FC = () => {
  const divRef = useRef<HTMLDivElement>(null);

  console.log(divRef.current);

  return (
    <>
      {data.map((item) => (
        <div ref={item.id === 13 ? divRef : undefined} key={item.id}>
          {item.name}
        </div>
      ))}
    </>
  );
};

export default App;
    Ответ написан
    Комментировать
    Комментировать

  • Как разделить данные в html формате?

    mizutsune
    @mizutsune
    Frontend Developer 
    function getAllNextSiblings(el, subElement, selectorFilter) {
     let collection = [];
     let target = el.nextElementSibling;

     while (target) {
          if (target.matches(subElement)) break;
          if (selectorFilter && !target.matches(selectorFilter)) {
               target = target.nextElementSibling;
               continue;
          }
          collection.push(target.textContent.trim());
          target = target.nextElementSibling;
     }
     return collection;
}


    // собираем заголовки и параграфы в массив объектов 
// разбивая полученные данные на группы
[...document.querySelectorAll("h1")].map(target => {
     return {
          heading: target.textContent,
          paragraphs: getAllNextSiblings(target, "h1", "p")
     };
});


    В итоге имея например такую HTML - разметку:

    <div class="container">
    <h1>Глава 1</h1>
    <p>Текстовой блок - 1</p>
    <p>Текстовой блок - 2</p>
    <p>Текстовой блок - 3</p>
    <p>Текстовой блок - 4</p>

    <h1>Глава 2</h1>
    <p>Текстовой блок - 1</p>
    <p>Текстовой блок - 2</p>
    <p>Текстовой блок - 3</p>
  </div>


    Получим такой результат:

    [
   {
      "heading": "Глава 1",
      "paragraphs": [
         "Текстовой блок - 1",
         "Текстовой блок - 2",
         "Текстовой блок - 3",
         "Текстовой блок - 4"
      ]
   },
   {
      "heading": "Глава 2",
      "paragraphs": [
         "Текстовой блок - 1",
         "Текстовой блок - 2",
         "Текстовой блок - 3"
      ]
   }
]
    Ответ написан
    3 комментария
    3 комментария