Question

我不能使用依赖/包管理器或构建系统，但我想使用这样的组件：https://github.com/trendmicro-frontend/react-clusterize/blob/master/src/Clusterize.jsx

...具体

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

请注意，尽管它是专门用于浏览器的代码，但它使用“导入”和“导出”。我知道这很常见，许多项目都使用构建系统来解决这个问题，但我不能。

如何剥离导入/导出以使类进入全局范围。是否有图书馆或cli可以做到这一点？

Answer 1

您可以直接在浏览器中包含React，ReactDOM和Babel，并在没有webpack或gulp的情况下使用它们。但是，对于生产环境，您需要包含这些脚本文件的最小化版本。

要渲染任何内容，您必须将行prop传递给ClusterizeComponent，如：

<ClusterizeComponent rows={ data } />

这段代码应该给你一个良好的开端。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
        <div id='app-root'></div>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/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>

带材进口和反应组件的出口

1 个答案: