我正在尝试使用INK的粘性js模块来工作。由于某种原因，事实并非如此。我还注意到，如果我选择该<div className="ink-sticky"> <div className="ink-alert basic">Hey I stick to the top when you scroll!</div></div>
从我的react组件中退出（当然也将className更改为class），然后直接将其放在我的index.html中，粘性可以正常工作。
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;
当页面呈现时，我看到墨水警报已设置了div的样式，但墨水粘性却无济于事。我已经将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生命周期挂钩中。
据我所知，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和插件，等等。