个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试使用 INK 的粘性 js 模块来工作。出于某种原因，事实并非如此。我还注意到，如果我采取 <div className="ink-sticky">退出我的 React 组件(当然将 className 更改为 class)并直接在我的 index.html 中过去，粘性效果很好。
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
http://ink.sapo.pt/javascript-ui/#InkUISticky_1
我的 react 组件:
const Content = Component({
render(){
var company = this.props.company;
return (
<div className='content padding-bottom-200 margin-top-50'>
<div className="column-group">
<div className="all-20">
<div className="ink-sticky">
<div className="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
</div>
<div className="all-80">
</div>
</div>
</div>
)
}
})
export default Content;
当页面呈现时，我看到 ink-alert 已对我的 div 进行了样式设置，但 ink-sticky 没有执行任何操作。我已将 js 包含在我的 index.html 中，如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
这确实有效:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="/lib/ink-3.1.10/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
</head>
<body>
<div class="wrap">
<div class="ink-grid">
<div class="ink-sticky">
<div class="ink-alert basic">Hey I stick to the top when you scroll!</div>
</div>
<div id="app"></div>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/ink-all.min.js"></script>
<script type="text/javascript" src="/lib/ink-3.1.10/js/autoload.min.js"></script>
</div>
</div>
</body>
</html>
最佳答案
这可能与以下事实有关:为了使元素具有粘性，ink-sticky 调用一些 JS 来实现这一点。现在，当页面刚刚呈现时，它会尝试通过类名称查找粘性元素并自动将其设置为粘性元素，但是您的粘性元素不在 HTML 中。它们被动态添加到 DOM 中。
这意味着，您必须告诉 ink 手动使某个元素变得粘性。
最合适的位置是在 componentDidMount 生命周期 Hook 中。
据我所知，Ink 确实有一个用于使元素粘性的 API:http://ink.sapo.pt/javascript/Ink.UI.Sticky/
理想情况下，该行为应该封装到它自己的组件中:
const Sticky = React.createClass({
componentDidMount() {
const el = ReactDOM.findDOMNode(this);
new Ink.UI.Sticky(el);
},
render() {
return <div>{this.props.children}</div>
}
});
这种方法用于将其他 UI 库与 React 连接起来，而不仅仅是这个。它也可用于 jQuery UI 和插件等。
关于javascript - 在 React 中无法保持粘性工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38048990/
25
4
0
我的应用程序包含两部分:网络部分和 GUI。它的工作方式有点像浏览器 - 用户从服务器请求一些信息，服务器发回一些代表某些 View 的数据，然后 GUI 显示它。 现在我已经将网络部分实现为一项服务
给定表达式字符串exp，编写程序检查exp中“{”、“}”、“（”、“）”、“[”、“]的对和顺序是否正确。 package main import ( "fmt" stack "gi
我想要一个简单的脚本在后台保持运行。目前看起来像这样: import keyboard while True: keyboard.wait('q') keyboard.send('ct
我维护着许多 RedHat Enterprise Linux(7 台和 8 台)服务器(>100 台)，其中包含不同的应用程序。为了保持理智，我当然会使用 Ansible 等工具，更重要的是，公共(p
我有一个 winforms 应用程序，它在网络服务请求期间被锁定 我已经尝试使用 doEvents 来保持应用程序解锁，但它仍然不够响应， 我怎样才能绕过这个锁定，让应用程序始终响应？ 最佳答案 最好
我正在努力在我的项目中获得并保持领先的 0。以下是当前相关的代码: Dim jobNum As String jobNum = Left(r1.Cells(1, 1), 6) r2.Cells(1
我正在尝试在我的 Canvas 中定位元素相对于我的背景。 窗口被重新调整大小，保持纵横比。 背景随着窗口大小而拉伸(stretch)。 问题是一旦重新调整窗口大小，元素位置就会不正确。如果窗口的大小
一直在玩弄 Hibernate 和 PostgreSQL，试图让它按预期工作。 但是由于某种原因，当我尝试将具有@OneToMany 关系的对象与集合中的多个项目保持一致时，除了第一个项目之外，所有项
我想将某些东西提交到 github 存储库，但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支，提交了我的更改并提交了一个 pull-request。 现在，问题是过了一段时间其他人已经
这是一个初学者问题，我仍在考虑“在 OOP 中”，所以如果我错过了手册中的答案或者答案很明显，我深表歉意。 假设我们有一个抽象类型， abstract type My_Abstract_type en
我们正在开展的一些项目在 jQuery 1.4.2 或更早版本中有着深厚的根基，介于缺乏最新版本的性能优势(或语法糖)、使用现已弃用的方法的耻辱以及部署一个积极维护的库的 3 年以上旧版本，升级现在迫
我看到在FMDB 2.0中，作者为线程添加了FMDatabaseQueue。例子是: // First, make your queue. FMDatabaseQueue *queue = [FMDa
我在 NSScrollView 中有一个 NSTableView。 NSTableView 的内容是通过绑定(bind)到 NSArrayController 来提供的，而 NSArrayContro
我在 TreeView 上有一个节点，我手动填充该节点并希望保持排序。通过用户交互，TreeViewItem 上的标题可能会更改，它们应该移动到列表中的适当位置。 我遍历一个 foreach，创建多个
我从主 NSWindow 打开一个 NSWindow。 DropHereWindowController *dropHereWindowController = [[DropHereWindowCon
我需要放置一个 form 3 按钮，当我单击该按钮时，将其显示为按下，其他按钮向上，当我单击另一个按钮时，它应该为“向下”，其他按钮应为“向上” 最佳答案 所有按钮的属性“Groupindex”必须设
我有一个使用 AnyEvent::MQTT 订阅消息队列的 perl 脚本。 目前我想要它做的就是在收到消息时打印出来。我对 perl 完全陌生，所以我正在使用它附带的演示代码，其中包括将 STDIN
如何在 .NET 应用程序中保持 TreeView 控件的滚动位置？例如，我有一个树形 View 控件，并经历了一个向其添加各种节点的过程，并将它们固定在底部。在此过程中，我可以滚动浏览 TreeVi
我维护了大量的 vbscripts，用于在我的网络上执行各种启动脚本，并且有一些我在几乎所有脚本中使用的函数。 除了复制和粘贴之外，有没有人对我如何创建可重用 vbscript 代码库有建议。我并不反
我有一些关于 Azure 自托管的问题。 假设用户 Alex 在物理机 M 上设置了 Windows 自托管代理。当 Alex 注销且计算机进入休眠状态时，代理将脱机。现在，当 Bob 登录同一台计算
我是一名优秀的程序员,十分优秀！