使组件贴在屏幕上并显示消息。反应

Question

我想做的是制作一个漂亮的消息框，当我保存某些东西时会出现，我可以访问一个状态，告诉我它是否正在加载，但我似乎无法制作一个组件无论您滚动了多少，都会始终出现。

页面很长，所以无论他们点击触发此保存功能的按钮，我都希望它出现。他们在哪里。

我在这个项目中使用了 Semantic UI，我尝试了他们的粘性组件，但它只会使组件像 50px 一样跟随屏幕，我希望这个数字是无限的。

感谢您的每一个回答

Answer 1

我猜你也可以使用固定模式来实现这一点。

在你的主要组件内部：

state = {
    // (...)
    isLoading: false
}

// (...)

render() {
    return (
        // Rest of your code
        {this.state.isLoading && <MessageComponent/>} // or however you're rendering the message/modal
        // Rest of your code
    )
}

然后在您各自的 css 文件中设置 MessageComponent 的样式：

.messageComponent {
    position: fixed;
}