简单的门户组件呈现一个 <div id="undefined"></div>答案

【问题标题】：Simple portal component renders a <div id="undefined"></div>简单的门户组件呈现一个 <div id="undefined"></div>
【发布时间】：2017-07-16 07:50:10
【问题描述】：

我按照本网站上的教程创建了一个简单的门户：How to create a React Modal(which is append to `<body>`) with transitions?。简单门户的代码是：

var Portal = React.createClass({
  render: () => null,
  portalElement: null,
  componentDidMount() {
    var p = this.props.portalId && document.getElementById(this.props.portalId);
    if (!p) {
      var p = document.createElement('div');
      p.id = this.props.portalId;
      document.body.appendChild(p);
    }
    this.portalElement = p;
    this.componentDidUpdate();
  },
  componentWillUnmount() {
    document.body.removeChild(this.portalElement);
  },
  componentDidUpdate() {
    React.render(<div {...this.props}>{this.props.children}</div>, this.portalElement);
  }
});

但是，它不是将上面创建的 div 呈现为父级，而是将具有未定义 id 的 div 呈现为父级。我想知道为什么会这样，以及如何删除它。谢谢

【问题讨论】：

你检查过portalId在Portal组件的props中了吗？您是否检查过它是否存在，它实际上具有价值？您是否检查过代码是否落入 if 块中，或者是否跳过它？此外，将 React 模块用于模态可能会更好，我知道至少有一个很好的模块（只是谷歌'React modal github'）。如果您出于学习目的而想手动完成，那么您必须先进行逻辑思考并尝试先完成它，然后再将其发布到此处，就像“它不起作用，我该如何解决它”一样。您尝试过什么解决方法？

标签： javascript reactjs dom react-dom

【解决方案1】：

我认为您需要将 portalId 作为道具传递给 Portal 组件。目前尚未定义。

【讨论】：

如果未定义，则不会进入尝试创建模态的 if
如果 portalId 未定义，此语句将返回 undefined - this.props.portalId && document.getElementById(this.props.portalId);。现在p 为假，它将进入if 语句并尝试创建div。这是普通的编码人。