（筆記）React.forwardRef

[gracekrcx]

情境: 當引用了一個共用元件 寫好 <Common>{......children}</Common> 當 children 裡的 event 要去控制 <Common> 這個元素

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

好消息，現在 ref.current 會指向 DOM 節點 可以照需求寫 function 去操控 ref.current

const CustomSlick = React.forwardRef((props, ref) => (
  <Slider ref={ref} {...setting}>
    {props.children}
  </Slider>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();

const handleClick = ()=>{
 ref.current.stop()
}

<CustomSlick ref={ref}>
 <div onClick={handleClick}>STOP!</div>
</CustomSlick >;

但 console.log('ref', ref) 會是 ref {current: null} 但操控沒有問題

傳送 ref 到 DOM component