javascript - 在 ref 中渲染 ReactPortal

Question

我想要实现的是在 ref 中呈现 ReactPortal，因此在 React 应用程序本身内部，而不是外部的 DOM 节点。

我在 Codepen 上做了一个例子 -> https://codepen.io/Gesma94/pen/RqKZmM

class Legend extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    if (this.props.useRef)
      return ReactDOM.createPortal(<div className="legend">Something</div>, this.props.ref);
    else
      return <div className="legend">Something else</div>;
  }
}

class Chart extends React.Component {
  private myref;

  render() {
        return (
      <div>
        <div className="container" ref={r => this.myref = r}>First Container</div>
        <Legend ref={this.myref} useRef={false} />
      </div>
    );
  }
}

ReactDOM.render(<Chart />, document.getElementById('root'));

所以，基本上:在图表组件中，我保存第一个 div 的引用，然后将该引用传递给图例组件。在图例组件内，如果 Prop useRef 为真，我想使用 createPortal() 返回图表 div 内的一个 div。

问题是 React 向我抛出错误:TypeScript 告诉我“'RefOject' 类型的参数不可分配给'Element' 类型的参数。

现在，我不知道我正在尝试做的事情是否可行，但如果可行，你们能帮帮我吗？也许我在 ref 中遗漏了一些东西(我猜是一些转换，但我真的不知道该怎么做)。

谢谢!

Answer 1

您必须首先确保您的 ref 已经创建，这是在首次安装组件时创建的。 ref prop 在 React 内部使用，就像 key prop 一样，所以你必须给它命名，并像对待任何其他 prop 一样对待它。

示例

class Legend extends React.Component {
  render() {
    if (this.props.useRef) {
      return ReactDOM.createPortal(
        <div className="legend">Something</div>,
        this.props.portalRef
      );
    }
    return <div className="legend">Something else</div>;
  }
}

class Chart extends React.Component {
  myref = null;
  state = { mounted: false };

  componentDidMount() {
    // The ref has been created when the component has mounted.
    this.setState({ mounted: true });
  }

  render() {
    return (
      <div>
        <div className="container" ref={r => this.myref = r}>
          First Container
        </div>
        {this.state.mounted && <Legend portalRef={this.myref} useRef />}
      </div>
    );
  }
}

ReactDOM.render(<Chart />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"><div>