在类组件反应中使用钩子

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

}

​

错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：

1. 您可能有React的不匹配版本，以及呈现器(例如React )
2. ，您可能违反了Hooks
3. 的规则，在同一个应用程序中可能有多个React副本，请参阅fb.me/react-无效-钩子-调用有关如何调试和解决此问题的提示。

Answer 1

在我看来，React是一种在不喜欢使用组件的情况下使用状态的选项。因此，语法看起来应该是这样的：

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

Answer 2

带有钩子的状态管理只适用于按函数进行开发，对于类中任何状态的更改，都必须经过继承的函数this.setState()；

职能外：

function Counter() {
    const [count,setCount] = useInView(0)
    return (<div> <button onclick={() => {setCount(count + 1)}}>Click me + 1</button> {count}</div>);
}