地帶進出口從反應的組分

我不能使用依賴性/包管理器，建立系統，但我想用這樣的組件：https://github.com/trendmicro-frontend/react-clusterize/blob/master/src/Clusterize.jsx 地帶進出口從反應的組分

具體...

import PropTypes from 'prop-types'; 
// CLASS CODE 
export default Clusterize;

公告它使用「導入」和「導出」，儘管它是專門用於瀏覽器的代碼。我知道這是很常見的，許多項目使用構建系統來處理這個問題，但我不能。

如何去除導入/導出以獲取類到全局範圍。有沒有可以做到這一點的圖書館或氣候變化？

來源

2017-05-30 Jake Cattrall

如果沒有構建工具，您將無法使用導入/導出。你試圖達到的最終目標是什麼？你打算使用任何第三方軟件包或只是在應用程序中構建的東西？ –

我們有一個大型項目，代碼庫主要是瀏覽器優先反應組件。我們根據需要手動加載組件和其他庫以提高性能和seo。我們希望使用第三方庫或組件，並且每次都需要分叉以刪除nodejs代碼，這使我們迅速老化技術債務。我們嘗試了webpack，但是代碼分塊插件不夠聰明，無法知道用戶已經下載了什麼。它也將代碼從全局名稱空間中取出，並且因爲我們使用react-rails在後端進行渲染，所以這使得它成爲不可接受的限制。 –

您可以直接在瀏覽器中包含React，ReactDOM和Babel，並在沒有webpack或gulp的情況下使用它們。但是對於生產環境，您需要包含這些腳本文件的最小化版本。

要渲染什麼，你必須通過行道具ClusterizeComponent，如：

<ClusterizeComponent rows={ data } />

此代碼應該給你一個良好的開端。

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <div id='app-root'></div> 
     <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
     <script src="https://cdn.bootcss.com/clusterize.js/0.17.6/clusterize.js"></script> 
     <script type="text/babel"> 
      (() => { 
       class ClusterizeComponent extends React.Component { 
        static propTypes = { 
         rows: React.PropTypes.array, 
         scrollTop: React.PropTypes.number 
        }; 
        static defaultProps = { 
         rows: [], 
         scrollTop: 0 
        }; 

        clusterize = null; 
        scrollElem = null; 
        contentElem = null; 

        componentDidMount() { 
         const scrollElem = ReactDOM.findDOMNode(this.scrollElem); 
         const contentElem = ReactDOM.findDOMNode(this.contentElem); 
         const rows = this.props.rows.map(row => { 
          if (typeof row === 'string') { 
           return row; 
          } 
          return React.isValidElement(row) ? row : null; 
         }); 

         this.clusterize = new Clusterize({ 
          rows, 
          scrollElem, 
          contentElem, 
          show_no_data_row: false 
         }); 
        } 
        componentWillUnmount() { 
         if (this.clusterize) { 
          this.clusterize.destroy(true); 
          this.clusterize = null; 
         } 
        } 
        shouldComponentUpdate(nextProps, nextState) { 
         return false; 
        } 
        componentWillReceiveProps(nextProps) { 
         if (nextProps.rows.length === 0) { 
          this.clusterize.clear(); 
          return; 
         } 
         if (nextProps.rows !== this.props.rows) { 
          const rows = nextProps.rows.map(row => { 
           if (typeof row === 'string') { 
            return row; 
           } 
           return React.isValidElement(row) ? row : null; 
          }); 
          this.clusterize && this.clusterize.update(rows); 
         } 
         if (nextProps.scrollTop !== this.props.scrollTop) { 
          this.scrollElem.scrollTop = nextProps.scrollTop; 
         } 
        } 
        render() { 
         const { className, style } = this.props; 

         return (
          <div 
           ref={node => { 
            this.scrollElem = node; 
           }} 
           className={className} 
           style={{ 
            height: '100%', 
            overflow: 'auto', 
            ...style 
           }} 
          > 
           <div 
            ref={node => { 
             this.contentElem = node; 
            }} 
           /> 
          </div> 
        ); 
        } 
       } 

       ReactDOM.render(
        <ClusterizeComponent />, 
        document.getElementById('app-root') 
       ); 
      })(); 
     </script> 
    </body> 
    </html>

來源

2017-05-30 20:34:53

使用此解決方案時，如果在npm中包含依賴項，導入和導出仍然會引發錯誤。保持版本控制非常重要，而不必爲每個第三方組件添加分支。 –

地帶進出口從反應的組分

回答

相關問題