Question

我正在尝试在应用程序上显示启动屏幕。但是，React正在其初始屏幕上方渲染其组件。

我的HTML看起来像这样：

<div id='overlay'>
   <img/>
</div>
<div id='root'></div>

#overlay {
  position: fixed; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(36,79,53, 1); 
  z-index: 99; 
}

#root{
  height: 100vh;
  z-index: 1;
}

我还能做什么？

Answer 1

我鼓励您创建一个react组件，该组件将作为react应用程序的一部分进行渲染。这样，您可以以编程方式控制何时出现相对于其余应用程序逻辑的重叠。由于已经有了CSS和标记，因此只需要将其放入组件中并进行渲染即可。

Answer 2

我将对此稍作讨论，然后运行代码段，您可以看到问题不在于您发布的代码。我将叠加层做了些透明，因此您可以看到它位于下面的红色文本上方。

class Thingy extends React.Component {
  render() {
    const {title} = this.props;
    console.log("rendered");
    return (
      <div className="thingy">
        <div>{title}</div>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("root")
);

#overlay {
  position: fixed; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(36,79,53, .7); 
  z-index: 99; 
}

#root{
  height: 100vh;
  z-index: 1;
}
.thingy{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='overlay'>
   <img/>
</div>
<div id='root'></div>

如何将我的启动画面保留在React组件上

2 个答案: