Question

您好，我已经查看了有关该主题的几篇文章，但是我做不到相同的结果。如果可能的话，我想举个例子。

import React from 'react'
import { useInView } from 'react-intersection-observer'
 
const Component = () => {
  const [ref, inView, entry] = useInView({
    /* Optional options */
    threshold: 0,
  })
 
  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  )
}

没关系

class Nameclasse extends Component
{
   constructor(props)
    {
      super(props);
     
      const [ref, inView, entry] = useInView({
        /* Optional options */
        threshold: 0,
      })
    }
     render()
    { 
      
      return (<div></div>);
    }

}

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：

您可能使用了不匹配的React和渲染器版本（例如React DOM）
您可能正在违反挂钩规则
您可能在同一应用中拥有多个React副本有关如何调试和解决此问题的提示，请参阅fb.me/react-invalid-hook-call。

Answer 1

在我看来，React Hook是在您不希望使用（反应）组件的情况下使用状态的一种选择。因此语法应如下所示：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      const [ref, inView, entry]: useInView({
         /* Optional options */
         threshold: 0,
      })
    };
  }

  render() {
    return (
      <>
      </>
    );
  }
}

我不知道这是否可行（没有时间），但是也许值得一试或其他经验丰富的编码员可以为您提供帮助：）

来源：https://reactjs.org/docs/hooks-state.html

在类组件React中使用钩子

1 个答案: