代码笔错误与反应

Question

我的 codepen 出现错误 ReferenceError：未定义要求我从 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

此错误来自您包含的 react-intersection-observer file

Answer 2

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

代码笔错误与反应

codepen errors with react

javascript

reactjs

codepen