0

Im trying to have a dynamic array of references. These references would come from the Grid items, that are being mapped from a list to the Grid Layout-Element.

This is my code:

<GridLayout
                        layout = {layout}
                        onLayoutChange={(currentLayout) => {onLayoutChange(currentLayout)}}
                        onDragStop={currentLayout => onDragStop(currentLayout)}
                        onDropDragOver={onDropDragOver}
                        onDrop={(currentLayout,item,_event) => onDrop(item,_event)}
                        onResizeStart={(layout, oldItem, newItem, placeholder, event, element) => {setConfigValues(oldItem.i)}}
                        onResize={(layout, oldItem, newItem, placeholder, event, element) => onResize(oldItem)}
                        style={canvasBoxStyle}
                        ref={gridRef}
                        {...gridLayoutProps}
            >
                {layout.map((layoutElement) =>
                    <div
                        style={{zIndex:getAttributesById(layoutElement.i).attributes.zIndex}}
                        key={parseInt(layoutElement.i)}
                        data-grid={layoutElement}
                        ref={(ref) => elementRefs.current.push(ref)}
                        onClick={() => {setConfigValues(layoutElement.i)}}
                    >
                        {createElement(layoutElement)}
                    </div>

                )}
            </GridLayout>

It seems like the "ref"-attribute gets ignored from react, because none of the grid items refs are being pushed into the refs-array

const elementRefs = useRef([]);

The ref-attribute works just fine for the "GirdLayout"-Element.

I dont know what im doing wrong i tried many stuff. I need the refs of each grid item to get the width and height of each of them.

Emre Cevik
  • 3
  • 2

2 Answers2

1

I think pushing the ref for every component render is not a good idea because that could create a big array with repeated elements in case of re-renders.

You could solve this problem by creating some sort of map of refs. For instance, the following code works fine for me:

import React, { useRef, useEffect } from "react";

const data = ["a", "b", "c", "d"];

export default function App() {
  const refs = useRef([]);

  useEffect(() => {
    console.log(refs);
  }, []);

  return (
    <div className="App">
      {data.map((d, i) => (
        <p key={i} ref={(ref) => (refs.current[i] = ref)}>
          {d}
        </p>
      ))}
    </div>
  );
}

That answer is based on other answer from Jorge Pirela: https://stackoverflow.com/a/70885503/7159312

May not be the most optimal way of doing that.

Michel Calheiros
  • 713
  • 4
  • 10
  • 2
    Hi. thanks for the answer. I found another way to achive my goal. React Grid Layout has an attribute for his GridLayout-Element. Its the "innerRef". Assigning a ref-Object to it, has given me the information i needed. I got the Tags of every grid item in the GridLayout. – Emre Cevik Feb 13 '22 at 16:04
0

I don't know how to get it work with innerRef from items...T T here is my code

<ReactGridLayout
        layout={layout}
        {...{
          className: "layout",
          items: 10,
          cols: 8,
          rowHeight: 12,
          verticalCompact: false,

          isDraggable: false,
        }}
      >
        {eles.map((item) => {
          return (
            <div
              key={item.key}
              innerRef={(el) => {
                itemsEls.current[item.key] = el;
              }}
            >
              {item.key}
            </div>
          );
        })}
      </ReactGridLayout>
lwtfy
  • 3
  • 2