Javascript 如何使组件加载到reactJS的标题上方

我想让一个组件（横幅）弹出上方我的标题时，页面完成加载

我已经从我们奇妙的社区得到了一些帮助，但是这段代码使整个头部加载，我找不到一种方法使它在我的头部组件上方弹出，也找不到一种方法来实现它

我想从我们的社区得到一些帮助。下面是使整个标题在两秒钟后弹出的代码：

class Banner extends React.Component {
    constructor() {
       super();
       this.state = {
          showHeader: false
       }
    }

    componentDidMount() {
       setTimeout(() => this.setState({showHeader: true}), 2000);
    }

      render() {
       return (
         this.state.showHeader && <div className="test">test</div>
       );
     }
}

ReactDOM.render(<Banner/>, document.getElementById('banner'))

类标题扩展了React.Component{
构造函数（）{
超级（）；
此.state={
showHeader:false
}
}
componentDidMount（）{
setTimeout（（）=>this.setState（{showHeader:true}），2000）；
}
render（）{
返回(
this.state.showHeader&测试
);
}
}
ReactDOM.render（，document.getElementById（'banner'））

和html

<style>
.test {
  width: 100%;
  height: 50px;
  background-color: yellow;
}

body {
  margin: 0;
}

.test2{
   width: 100%;
  height: 80px;
  background-color: red;
}
</style>

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

<div id='banner'></div>
<div id='header'></div>

.测试{
宽度：100%；
高度：50px；
背景颜色：黄色；
}
身体{
保证金：0；
}
.test2{
宽度：100%；
高度：80px；
背景色：红色；
}

---

如何制作一个横幅，在页面完全加载后将加载到页眉上方

在渲染内部，您需要使用大括号来澄清应该渲染什么和不应该渲染什么。。这里有一个例子

return (
    <div>
       {this.state.showHeader ? <div className="test">test</div> : null }
       <div className="test2">test2</div>
    </div>
);

---

不是自动关闭标记，您必须通过以下方式关闭它：

。目前，我猜你的标题包含在横幅中（以及页面的其他部分）@JeremyThille错误更正了如何实现这一点的任何提示？但它现在起作用了吗？因为它应该。标题在标题上方。不，没有更改任何内容。如果没有实际调试的方法，我很难调试问题。你能创建一个js小提琴复制你的问题吗？

return (
    this.state.showHeader && <div className="test">test</div>,
    <div className="test2">test2</div>
);

return (
    <div>
        {this.state.showHeader ? <div className="test">test</div> : null }
        <div className={`test2${this.state.showHeader ? ' animate' : ''}`}>test2</div>
    </div>
);

.test {
  width: 100%;
  height: 50px;
  background-color: yellow;
  position: absolute;
  top: 0;
}

.test2{
   width: 100%;
  height: 80px;
  background-color: red;
  position: absolute;
  transition: all 2s ease;
  top: 0;
}
.animate {
  top: 50px;
}