如何将 ref 作为组件对象中的道具传递？

Question

我在 GridItem 中以 widget?.component 的形式访问 availableWidgets 以迭代组件，但现在我想将 GridItem Ref 传递给小部件组件。 给我任何建议。

const availableWidgets = [
  {},
  {
    component: <DashboardsGuide />,
    id: "1"
  },

  {
    component: <DashboardsWeather />,
    id: "2"
  },
  {
    component: <DashboardsTraining />,
    id: "3"
  },
];

在这里，可用的小部件包含组件，我想将父 ref.current 传递给这个小部件，但我不知道如何在迭代时将 ref 传递给它的子组件。

如果可以的话，给个有成果的建议

我曾尝试forwardRef 使其成为可能，但没有成功。

const GridItem = React.forwardRef(function GridItem(
  { className, style, children, item, widget, id, ...rest },
  ref
) {
  return (
    <div
      id={`width-height-${id}`}
      className={`grid-item ${className}`}
      style={style}
      ref={ref}
      {...rest}
    >
      {console.log(ref?.current?.offsetHeight, ref?.current?.offsetWidth)}
      {widget?.component}
      {children}
    </div>
  );
});

我正在使用 React Grid Layout 库。

function GridLayout({ layouts, toggle }) {
  return (
    <ResponsiveGridLayout
      // className="layout"
      layouts={layouts}
      rowHeight={20}
      isDraggable={toggle ? true : false}
      isResizable={toggle ? true : false}
      margin={[20, 20]}
      onLayoutChange={(...e) => {
        localStorage.setItem("layouts", JSON.stringify(e[1]));
      }}
      breakpoints={{ lg: 1280, md: 992, sm: 767, xs: 480, xxs: 0 }}
      cols={{ lg: 24, md: 20, sm: 12, xs: 8, xxs: 4 }}
    >
      {layouts.lg.map((item) => (
        <GridItem id={item.i} key={item.i} widget={availableWidgets[item.i]} />
      ))}
    </ResponsiveGridLayout>
  );
}

通过使用

{layouts.lg.map((item) => (
    <GridItem id={item.i} key={item.i} widget={availableWidgets[item.i]} />
  ))}

我正在迭代小部件

Answer 1

如果我理解正确，GridItem 需要创建一个 React ref 并将其附加到它正在渲染的div，并将 ref 传递给子小部件组件以访问当前值（即偏移量)。

为此，我建议对 availableWidgets 数组进行小改动，以便您在渲染时将组件实例化为 JSX，然后注入任何道具。

const availableWidgets = [
  {},
  {
    component: DashboardsGuide,
    id: "1"
  },

  {
    component: DashboardsWeather,
    id: "2"
  },
  {
    component: DashboardsTraining,
    id: "3"
  },
];

接下来让GridItem 创建 React ref，将其附加到 div 并实例化小部件组件以在 prop 中传递 ref。

const GridItem = ({
  className,
  style,
  children,
  item,
  widget = {},
  id,
  ...rest
}) => {
  // (1) Create a React ref
  const gridItemRef = React.useRef();

  // (3) get widget component and rename to valid PascalCase name
  const { component: Widget } = widget;

  // Log the ref values in an intentional side-effect
  React.useEffect(() => {
    const { offsetHeight, offsetWidth } = gridItemRef.current;
    console.log(offsetHeight, offsetWidth);
  });

  return (
    <div
      id={`width-height-${id}`}
      className={`grid-item ${className}`}
      style={style}
      ref={gridItemRef} // (2) attach ref
      {...rest}
    >
      {Widget && <Widget gridItemRef={gridItemRef} />} // (4) render Widget and pass ref prop
      {children}
    </div>
  );
};

在每个小部件组件（DashboardsGuide、DashboardsWeather 和 DashboardsTraining）中，通过 props 访问传递的 GridItem 的 gridItemRef。