Монтировать React Portal где-нибудь для текущего компонента рендеринга - PullRequest
Новая
       8

Монтировать React Portal где-нибудь для текущего компонента рендеринга

0 голосов
/ 30 марта 2019

Я пытаюсь смонтировать портал React, чей узел является членом текущего компонента рендеринга. Как показано в приведенном ниже коде, я вынужден повторно выполнить его рендеринг, установив состояние в 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>
    )
  }
}

Как мы можем достичь этого при первом рендеринге?

...