reactjs - 实现 ReactDOM.createPortal 时出现问题(React 16 功能)

Question

为了清楚起见，假设我有 3 个组件:<Child>, <Parent>, <GrandParent>

我正在尝试渲染 <Child>在 <GrandParent> 内, 没有渲染 <Parent> (从中调用 <Child>)。

parent.js

class Parent extends Component {
  ...
  componentDidMount() {
    return (
      <Route ... component={ Child } />
    );
  }

  render() {
  // the <Route> element is rendered here
  }
}

当点击 <Parent> 内的链接时, 我要 <Parent>卸载和<Child>在 <GrandParent> 内呈现，这是 React 新功能“Portal”应该实现的。

从文档中，应该如何实现:

ReactDOM.createPortal(componentToRender, elementToRenderInto);
// Hence in my case:
ReactDOM.createPortal(<Child />, document.getElementById('grand-parent'));

但我不确定如何/在何处使用这段代码。我尝试渲染的所有内容 <Child>在 <Parent> 旁边，这不是我想要的。非常欢迎关于该主题的提示/文档/示例

Answer 1

如果我做对了，祖父组件必须获得对底层 DOM 节点的引用并将其传递给 parent，然后 parent 使用 呈现一个门户 child 。

我想这可能是您要实现的目标:

class GrandParent extends React.Component {
  state = {};
  getRef = that => this.setState({ self: that });
  render() {
    return (
      <div ref={this.getRef} style={{}}>
        +
        <Parent parent={this.state.self}>
          <Child />
        </Parent>
        +
      </div>
    );
  }
}

class Parent extends React.Component {
  render() {
    if (this.props.parent)
      return createPortal(this.props.children, this.props.parent);
    return (
      <div>
        parent<Child />
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return <div>child</div>;
  }
}

codesandbox