Observe (get sized) control (listen to events) over a nested component in the react and typescript application via the forwardRef function

Question

I have a functional component called MyDivBlock

const MyDivBlock: FC<BoxProps> = ({ }) => {
{getting data...}

return (
    <>
      <div className='divBlock'>
        {data.map((todo: { id: string; title: string }) => 
            <div key={todo.id}>{todo.id} {todo.title} </div>)}
      </div>
    </>
  );
};

I use it in such a way that MyDivBlock is nested as a child of

const App: NextPage = () => {
  return (
    <div>
      <Box >
        <MyDivBlock key="key0" areaText="DIV1" another="another"/>
      </Box>
    </div>
  )
}

Note that MyDivBlock is nested in Box and MyDivBlock has no ref attribute. This is important because I need to write Box code with no additional requirements for my nested children. And anyone who will use my Box should not think about constraints and ref attributes.

Then I need to get the dimensions of MyDivBlock in the code of Box component, and later attach some event listeners to it, such as scrolling. These dimensions and listeners will be used in the Box component. I wanted to use Ref to control it. That is, the Box will later observe changes in the dimensions and events of MyDivBlock by creating a ref-reference to them

I know that this kind of parent-child relationship architecture is implemented through forwardRef

And here is the Box code:

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

export interface BoxProps extends React.ComponentProps<any> {
  children?: Element[];
  className: string;
}

export const Box: React.FC<BoxProps> = ({ children, ...rest }: BoxProps): JSX.Element => {
  const childRef = useRef<HTMLDivElement>();

  const ChildWithForwardRef = forwardRef<HTMLDivElement>((props, _ref) => {
    const methods = {
      show() {
        if (childRef.current) {
          console.log("childRef.current is present...");
          React.Children.forEach(children, function (item) {  
            console.log(item)})
          console.log("offsetWidth = " + childRef.current.offsetWidth);
        } else {
          console.log("childRef.current is UNDEFINED");
        }
      },
    };

  useImperativeHandle(_ref, () => (methods));

  return <div ref={childRef}> {children} </div>
  });
  ChildWithForwardRef.displayName = 'ChildWithForwardRef';

  return (
    <div
      className={'BoxArea'}>
      <button name="ChildComp" onClick={() => childRef.current.show()}>get Width</button>
      <ChildWithForwardRef ref={childRef} />
    </div>
  );
}

export default Box;

The result of pressing the button:

childRef.current is present... [...] $$typeof: Symbol(react.element) key: "key0" props: {areaText: 'DIV1', another: 'another'} [...] Object

offsetWidth = undefined

As you can see from the output, the component is visible through the created ref. I can even make several nested ones and get the same for all of them.

But the problem is that I don't have access to the offsetWidth and other properties.

The other challenge is how can I add the addEventListener? Because it works in pure Javascript with their objects like Element, Document, Window or any other object that supports events, and I have ReactChildren objects.

Plus I'm using NextJS and TypeScript.

Answer 1

You can't solve this completely with React. I solved it by wrapping the child component, making it take the form of the parent.