Question

我正在尝试使用INK的粘性js模块。出于某种原因，它只是没有。我也注意到，如果我接受<div className="ink-sticky"> <div className="ink-alert basic">Hey I stick to the top when you scroll!</div> </div> 退出我的反应组件（当然还有 className 更改为类）并直接在我的index.html中粘贴，粘性工作正常。

http://ink.sapo.pt/javascript-ui/#InkUISticky_1

我的反应组件：

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>

Answer 1

这可能与以下事实有关：为了使元素变得粘稠，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和插件，等等。

无法在React中获得粘性工作

1 个答案: