如何从React 16门户网站获得参考？

Question

有没有办法ref从React 16门户网站获得.我尝试了以下方法,但它似乎不起作用:

const Tooltip = props => (
  ReactDOM.createPortal(
    <div>{props.children}</div>,
    // A DOM element
    document.body
  )
);

class Info extends React.Component {
   render() {
      return (
        <Tooltip 
          ref={ el => this.tooltip = el }
        >
          My content
        </Tooltip>
      ); 
   }

   componentDidMount() {
      console.log(this.tooltip); // undefined
   }
}

我需要ref动态计算元素的最终位置!

https://codepen.io/anon/pen/QqmBpB

Answer 1

ReactDOM.createPortal返回一个ReactPortal实例,它是一个有效的ReactNode但不是一个有效的DOM元素.同时createPortal将尊重组件上下文.所以我将函数调用移到了render方法中,它解决了这个问题.

class Info extends React.Component {
  render() {
    // I moved the portal creation to be here
    return ReactDOM.createPortal(
       // A valid DOM node!!
       <div ref={ el => this.tooltip = el }>{props.children}</div>,
       // A DOM element
       document.body
    ); 
  }

  componentDidMount() {
     console.log(this.tooltip); // HTMLDivElement
  }
}