从react组件中剥离导入和导出
从react组件中剥离导入和导出
提问于 2017-05-31 02:40:03
具体来说..。
import PropTypes from 'prop-types';
// CLASS CODE
export default Clusterize;请注意，尽管它是专门为浏览器编写的代码，但它使用了"import“和"export”。我知道这很常见，很多项目都使用构建系统来解决这个问题，但我不能。
如何剥离导入/导出以使类进入全局作用域。有没有可以做到这一点的库或cli？
回答 1
Stack Overflow用户
发布于 2017-05-31 04:34:54
你可以在浏览器中直接使用React，ReactDOM和Babel，而不需要使用webpack或者吞咽它们。但是，对于生产环境，您需要包含这些脚本文件的最小化版本。
要渲染任何内容，您必须将rows 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44269585
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号