2

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

我正在尝试<Child>在不渲染的<GrandParent>情况下渲染<Parent>（从中<Child>调用）。

父.js

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

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

单击 inside 的链接时<Parent>，我想<Parent>卸载并<Child>在其中进行渲染<GrandParent>，这是 React 新功能“门户”应该实现的。

从文档中，这应该如何实现：

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

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

4

1 回答 1

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>;
  }
}

密码箱

于 2018-05-23T16:25:49.023 回答