javascript - 如何从React 16门户获取引用？

有没有一种方法可以从React 16门户获取ref。我尝试了以下方法，但似乎不起作用:

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

最佳答案

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
  }
}

关于javascript - 如何从React 16门户获取引用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46643591/