如何将 ref 设为 props.children

Question

我想要多用途包装模块。

所以，我制作了一个 ItemComponent

export const DragItem = (props: DragProps) => {
  const [{... }, fooRef] = useFoo({

  })

  return (
    props.children // how can i send fooRef to here??
  )
}

我应该将参考发给 props.children 可能吗？

Answer 1

检查这个：https://codesandbox.io/s/gracious-williams-ywv9m 您需要使用 React.cloneElement 到 attach/pass 额外数据到 children

export const DragItem = (props: DragProps) => {
  const [foo, fooRef] = React.useState({});
  var childrenWithRef = React.Children.map(props.children, function(child) {
    return React.cloneElement(child, { fooRef: fooRef });
  });
  return childrenWithRef;
};

Answer 2

我知道了。

export const DragItem = (props: DragProps) => {
  const [{... }, fooRef] = useFoo({

  })

  return (
    React.cloneElement(props.children, { ref: fooRef })
  )
}

如何将 ref 设为 props.children

how can put ref to props.children

ref

typescript

reactjs

react-hooks