Question

我有一个组件，比如我X和DOM-body中呈现的app。我有另一个组件Y由组件X呈现，但组件Y应该以全屏方式打开。因此，即使document.body呈现它，我也需要在X而不是组件X中呈现此内容。

React Components的结构是：

app
    -X
         -Y (in Full Screen)

现在的结构应该是这样的：

<body>
    <div class="X">
         <div class="Y">
         </div>
    </div>
</body>

并且渲染的流程应为：

app.body
    -X
-Y

并且DOM结构应该是：

<body>
    <div class="X">
    </div>
    <div class="Y">
    </div>
</body>

我该怎么做？另外，我正在使用ES6类来制作反应组件。

Answer 1

更新：从 React 16 开始，官方支持portals。

门户提供了将子级渲染到DOM节点的第一类方法存在于父组件的DOM层次结构之外。

我不推荐使用此解决方案，因为它使用的是未记录的React API 。免责声明，这里是：

＆＃13;

class Portal extends React.Component {
  componentDidUpdate() {
    this._renderLayer();
  }
  
  componentDidMount() {
    this._renderLayer();
  }
  
  componentWillUnmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById(this.props.container));
  }

  _renderLayer() {
    ReactDOM.unstable_renderSubtreeIntoContainer(this, this.props.children, document.getElementById(this.props.container));
  }
  render() {
    return null;
  }
}

class Y extends React.Component {
  render() {
    return <div>Y</div>;
  }
}

class X extends React.Component {
  render() {
    return (
      <div> 
        X
        <Portal container="Y">
          <Y />
        </Portal>
      </div>
    );
  }
}

ReactDOM.render(<X/>, document.getElementById('X'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='X'></div>
<div id='Y'></div>

＆＃13;

Answer 2

只需在自己的<div>中呈现每个组件：

<body>
    <div id="app"></div>
    <div id="Y"></div>
</body>

分别渲染每个组件：

React.render(ComponentApp, document.getElementById("app"));
React.render(ComponentX, document.getElementById("X"));

如何在DOM体中渲染组件，即使某个其他组件在反应中呈现它？

2 个答案: