不能在React中获得粘性工作

Can't get Sticky Working in React

本文关键字：工作 React 不能      更新时间：2023-09-26

我正试图使用INK的sticky 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中传递，sticky工作得很好。

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设置了样式，但是墨水粘贴没有做任何事情。我在index.html中包含了js，如下所示:

<!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和插件，等等。

相关文章：