Javascript ReactJS—；如何在类组件中使用相交观察者？

我设法在功能组件中使用

react intersection observer

。但是，我在将它与类组件一起使用时没有成功。我试图按照文档进行操作，但出现以下错误：

不变量失败：反应交叉点观察者：未找到DOM节点。确保将“ref”转发到要观察的根DOM元素。

我做错了什么？先谢谢你

伪码

• 当元素在视口中可见时触发动画

import React，{Component}来自“React”；
从“反应网格系统”导入{Container，Row，Col}；
从“框架运动”导入{motion}；
从“反应交点观察者”导入{InView}；
让年、日、时、分、秒；
功能正常运行时间（countTo）{
var now=新日期（）；
countTo=新日期（countTo）；
var差异=现在-计数；
年份=数学下限（差/（60*60*1000*24）/365）；
天数=数学下限（差/（60*60*1000*24））；
小时=数学楼层（（差/（60*60*1000*24））*24）；
分钟=数学楼层（（差/（60*60*1000*24））*24*60）；
秒=分钟*60；
clearTimeout（正常运行时间到）；
upTime.to=setTimeout（函数（）{
正常运行时间（倒计时）；
}, 1000);
}
导出默认类计时器扩展组件{
状态={
y:0，
d:0，
h:0，
m:0，
s:0，
切换：真
};
componentDidMount（）{
//设置初始秒数
正常运行时间（“2006年5月5日，00:00:00”）；
设currentSec=secs；
this.myInterval=setInterval（（）=>{
正常运行时间（“2006年5月5日，00:00:00”）；
currentSec+=1；
这是我的国家({
y:好几年了，
d:天，
h:小时，
m:分钟，
s:currentSec
});
}, 1000);
}
组件将卸载（）{
clearInterval（this.myInterval）；
}
render（）{
常数{y，h，m，s}=this.state；
常量样式={
listStyle:“无”，
fontFamily：“Soleil”，
字体大小：“200px”，
线宽：“220px”，
颜色：“黑色”，
textAlign：“左”
};
//动画列表
常数列表={
可见：{
不透明度：1，
转换：{0.06}
},
隐藏的：{
不透明度：0，
转换：{}
}
};
//动画列表
常数项={
可见：{
不透明度：1，
y:0，
转换：{ease:“backInOut”，持续时间：0.8}
},
隐藏：{opacity:0，y:100}
};
//条件渲染
如果（y！==0）{
返回(
{（{inView，ref，entry}）=>(
{y} y
{h} h
{m} m
{s}
)}
);
}否则{
返回“加载…”；
}
}
}

似乎Motion.ul没有使用传递给HTML元素的ref。

---

似乎Motion.ul没有使用传递给HTML元素的ref。

---

看起来像是

motion.ul

不处理从渲染函数传递给它的函数ref。使用div包装

motion.ul

，并将ref传递给div似乎有效。谢谢Ori Drori。似乎

motion.ul

不处理从渲染函数传递给它的函数ref。用div包装

motion.ul

，并将ref传递给div似乎有效。谢谢Ori Drori。

import React, { Component } from "react";
import { Container, Row, Col } from "react-grid-system";
import { motion } from "framer-motion";
import { InView } from "react-intersection-observer";

let years, days, hours, mins, secs;

function upTime(countTo) {
  var now = new Date();
  countTo = new Date(countTo);
  var difference = now - countTo;

  years = Math.floor(difference / (60 * 60 * 1000 * 24) / 365);
  days = Math.floor(difference / (60 * 60 * 1000 * 24));
  hours = Math.floor((difference / (60 * 60 * 1000 * 24)) * 24);
  mins = Math.floor((difference / (60 * 60 * 1000 * 24)) * 24 * 60);
  secs = mins * 60;

  clearTimeout(upTime.to);
  upTime.to = setTimeout(function() {
    upTime(countTo);
  }, 1000);
}

export default class Timer extends Component {
  state = {
    y: 0,
    d: 0,
    h: 0,
    m: 0,
    s: 0,
    toggle: true
  };

  componentDidMount() {
    // Set inital seconds
    upTime("may,05,2006,00:00:00");
    let currentSec = secs;

    this.myInterval = setInterval(() => {
      upTime("may,05,2006,00:00:00");
      currentSec += 1;

      this.setState({
        y: years,
        d: days,
        h: hours,
        m: mins,
        s: currentSec
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.myInterval);
  }

  render() {
    const { y, h, m, s } = this.state;
    const style = {
      listStyle: "none",
      fontFamily: "Soleil",
      fontSize: "200px",
      lineHeight: "220px",
      color: "black",
      textAlign: "left"
    };

    // Animation list
    const list = {
      visible: {
        opacity: 1,
        transition: { staggerChildren: 0.06 }
      },
      hidden: {
        opacity: 0,
        transition: {}
      }
    };

    // Animation list
    const item = {
      visible: {
        opacity: 1,
        y: 0,
        transition: { ease: "backInOut", duration: 0.8 }
      },
      hidden: { opacity: 0, y: 100 }
    };

    // Conditional render
    if (y !== 0) {
      return (
        <Container fluid>
          <Row>
            <Col offset={{ xl: 1 }}>
              <InView>
                {({ inView, ref, entry }) => (
                  <motion.ul
                    ref={ref}
                    style={style}
                    initial="hidden"
                    animate={inView ? "visible" : "hidden"}
                    variants={list}
                  >
                    <motion.li variants={item}>{y}Y</motion.li>
                    <motion.li variants={item}>{h}H</motion.li>
                    <motion.li variants={item}>{m}M</motion.li>
                    <motion.li variants={item}>{s}</motion.li>
                  </motion.ul>
                )}
              </InView>
            </Col>
          </Row>
        </Container>
      );
    } else {
      return <div>"Loading..."</div>;
    }
  }
}