javascript - 在React中使用createPortal时在挂载DOM之前触发componentDidMount

我的React应用程序中有这样的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentB from './ComponentB';

class ComponentA extends React.Component {
    constructor(props) {
        super(props);
        this.condition = this.props.condition;
    }

    render() {
         return ReactDOM.createPortal(
            <div id="abc"></div>,
            document.getElementById('xyz'))
    }

    componentDidMount() {
        ReactDOM.createPortal(
            <div>
                {

                    this.condition &&
                    <ComponentB />
                }
            </div>,
            document.body)
    }
}

基本上，我只想在将ComponentB挂载到DOM后才渲染ComponentA。因此，我将ComponentA的代码放在componentDidMount的ComponentB中。但是在ComponentB完成安装到DOM之前，仍会渲染ComponentA。

为什么会发生这种情况？该问题的解决方案是什么？

最佳答案

我不确定您为什么使用createPortal。但是，如果您只是想实现自己的目标，则只需在第一个组件的componentDidMount中设置状态条件，告知开始渲染第二个组件。

看看是否有帮助。

const ComponentB = () => {

  return (
    <div>Hi is is componentB</div>
  );
}
class ComponentA extends React.Component {
  constructor(props) {
    super (props);

    this.state = {
      renderB: false
    };
  }
  componentDidMount() {
    this.setState({
      renderB: true
    });
  }

  render () {
    let {renderB} = this.state;

    return (
      <div>

        <h3>Hey i am component A</h3>
        {
          renderB? <ComponentB /> : null
        }
      </div>
    );
  }
}

关于javascript - 在React中使用createPortal时在挂载DOM之前触发componentDidMount，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50610079/