将React Portal安装在当前渲染组件的某个位置

Question

我正在尝试安装一个React Portal，其节点是当前渲染组件的成员。如下面的代码所示，我必须通过在componentDidMount中设置一个状态来强制重新渲染它，这似乎对我来说是一种反模式。

import React from 'react';
import PropTypes from 'prop-types';
import FormProduct from 'containers/FormProduct';
import Portal from 'shared/Portal';

class Users extends React.Component {
  constructor(props) {
    super(props);
    this.productForm = React.createRef();
    this.state = {
      mounted: false,
    }
  }

  componentDidMount() {
    this.setState({ mounted: true});
  }

  render() {
    return (
      <React.Fragment>
        <div className="mt-20" ref={this.productForm}></div>
          {this.state.mounted && <Portal node={this.productForm.current}>
            <FormProduct />
          </Portal>}
      </React.Fragment>
    )
  }
}

我们如何在第一次渲染中实现它？