• Как пробросить 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
    I will live forever in the flame of your eyes.
    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 комментария