Question

我的codepen中出现错误 ReferenceError：未定义require 我从react-intersection-observer@5.0.5/dist/react-intersection-observer.cjs.js导入了intersection-observer ： codepen link

 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>
   );
  }
}

Answer 1

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

Answer 2

此错误来自您收录的react-intersection-observer file

codepen错误与反应

2 个答案: