how can put ref to props.children

Question

I want wrapping module for multi use.

so, I make an ItemComponent

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

  })

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

I should send ref to props.children Is it possible?

explain in details your problem ans if possible provide fiddle or stackblitz — Avinash Dalvi, Jan 14 '20 at 05:29
see if this can help you. https://stackoverflow.com/questions/54940884/pass-react-ref-from-parent-to-child-in-order-to-get-dom-element — Avinash Dalvi, Jan 14 '20 at 05:35
may be this can help you https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children — Sumanth Madishetty, Jan 14 '20 at 05:42

score 1 · Accepted Answer · answered Jan 14 '20 at 05:41

check this : https://codesandbox.io/s/gracious-williams-ywv9m You need to use React.cloneElement to attach/pass extra data to 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;
};

score 0 · Answer 2 · answered Jan 14 '20 at 05:49

0

I got it.

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

  })

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

answered Jan 14 '20 at 05:49

곽대용

399
2
3
15

how can put ref to props.children

2 Answers2