在React中無法粘貼工作

我正在嘗試使用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中直接顯示，則粘滯工作正常。在React中無法粘貼工作

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;

當頁面呈現，我看到墨警報已風格的我格但油墨粘性是無所作爲。我已經包含在我的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>

來源

2016-06-27 PositiveGuy

它可能有一個事實，即，使元素粘做，ink-sticky調用一些JS實現這一目標。現在，當頁面剛剛呈現時，它會嘗試按類名稱查找粘性元素，並自動將其添加到該元素中，但粘性元素不在HTML中。它們被動態添加到DOM中。

這意味着，您必須告訴ink手動製作某個元素。

最合適的做法是在componentDidMount生命週期掛鉤中。

據我所看到的，油墨確實有製作元素粘性的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> 
    } 
});

這種方法是什麼是用來橋接其他用戶界面庫與React，而不僅僅是這一個。它也可以用於jQuery UI和插件等等。

來源

2016-06-27 08:42:43

在React中無法粘貼工作

回答

相關問題