javascript - 使 react 元素出现在全屏子 react 组件的前面

我有一个react组件，我们称他为ReactContainer。
ReactContainer包含一些元素，其中一个是MyReactBox，一个是ReactInnerContainer（下面的代码示例）。

我的问题是，如果使用requestFullScreen API将ReactInnerContainer中的一个元素放到全屏状态，则尽管MyReactBox具有CSS zIndex属性到最大可能值，但它会覆盖MyReactBox。

export default class ReactContainer extends React.Component {
    render() {
        return (
            <div>
                <MyReactBox />
                <br />
                <ReactInnerContainer />
            </div>
        );
    }
}

export default class ReactInnerContainer extends React.Component {

    handleFullScreenClick() {
        this.refs.innerDiv.webkitRequestFullscreen();
    }

    render() {
        return (
            <div ref="innerDiv">
                /* Some stuff here */
            </div>
        );
    }
}

我希望尽管innerDiv处于全屏状态，但MyReactBox仍将显示在屏幕的前面。如果我在innerDiv中渲染MyReactBox，那么它可以工作，但是我需要MyReactBox在ReactContainer中渲染。

任何想法如何解决问题？
非常感谢 ：）

最佳答案

在父组件上调用webkitRequestFullscreen

export default class ReactContainer extends React.Component {

    handleFullScreen (){
         this.screen.webkitRequestFullscreen();
    }
    render() {
        return (
            <div ref={(screen) => {this.screen = screen }}>
                <MyReactBox />
                <br />
                <ReactInnerContainer handleFullScreen={this.handleFullScreen.bind(this)}/>
            </div>
        );
    }
}

export default class ReactInnerContainer extends React.Component {

    handleFullScreenClick() {
          this.props.handleFullScreen();
    }

    render() {
        return (
            <div >
                /* Some stuff here */
            </div>
        );
    }
}