时间戳

首页 > 解决方案 > 反应的codepen错误

javascript - 反应的codepen错误

问题描述

我的 codepen 出现错误 ReferenceError: require is not defined 我已经从 react-intersection-observer@5.0.5/dist/react-intersection-observer.cjs.js 导入了 intersection-observer： codepen 链接

 class AdImpression extends React.Component {
  state = {
    tracked: '',
  };

  handleChange = event => {
    if (event.isIntersecting && event.intersectionRatio >= 0.5) {
      this.recordedTimeout = setTimeout(() => {
        this.setState({ tracked: 'ad--tracked' });
      }, 1000);
      return;
    }
    clearTimeout(this.recordedTimeout);
  };

  render() {
    return (
      <Observer onChange={this.handleChange} threshold={0.5}>
        <div className={`ad ${this.state.tracked}`} />
      </Observer>
    );
  }
}

class ImpressionTracking extends React.Component {
  render() {
    return (
    <div>
        <div className="header visible">Criteria: 50% visible pixels + 1 continuous sec</div>
        <div className="body body--center">
            <AdImpression index={1} />
            <AdImpression index={2} />
            <AdImpression index={3} />
        </div>
    </div>
   );
  }
}

标签： javascriptreactjscodepen

解决方案

您需要使用该软件包的umd版本。在文件名中，cjs代表需要全局范围内的函数的common js 。当 * esm* 用于 es6 模块时， umd将尝试猜测可用的内容，您需要使用 codepen 的“添加模块”功能。require

推荐阅读