Question

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

我从我们出色的社区得到了一些帮助，但这段代码使得标题成为整个加载，我找不到让它弹出我的标题组件的方法，也无法实现它。

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

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'))

和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>

如何在页面完全加载后制作将在页眉上方加载的横幅？

Answer 1

在你的渲染中，你需要使用花括号来阐明应该渲染什么，不应该是什么......这里是一个例子

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

而不是

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

你的css就像......

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

SAMPLE FIDDLE

如何在reactJS上使组件加载到标题之上

1 个答案: