使用消息使组件粘在屏幕上。反应

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

使用消息使组件粘在屏幕上。反应

Make a component stick to screen with a message. React

javascript

sticky

reactjs

semantic-ui

semantic-ui-react