Reactjs React.JS中的钩子调用无效 import React，{Component，useState，useffect}来自'React'； 从'react redux'导入{connect}； 从“./BigHeader”导入BigHeader； 从“./SmallHeader”导入SmallHeader； 函数isSmall（）{ 如果（此窗口宽度{ window.addEventListener（“调整大小”，确定宽度）； 返回函数（）{ removeEventListener（“调整大小”，确定宽度）； } }) 类头扩展组件{ render（）{ 返回此。isSmall（）？： } } //导出默认连接（mapStateToProps，第页）； 导出默认标题；

我从这行

const[windowWidth，setWindowWidth]=useState（window.innerWidth）得到一个错误

当屏幕<1307时，我尝试返回一个移动/较小的标题，当屏幕<1307时，我尝试返回一个不同的标题。
您不能在函数外部使用
挂钩

你能移动代码
const[windowWidth，setWindowWidth]=useState（window.innerWidth）吗代码，然后重试。
尝试使用React Native中的维度，此代码应该可以工作：
您还可以在每次调用函数isSmall（）时更新windowWidth值：

从'react native'导入{Dimensions}
const windowWidth=Dimensions.get（'window'）.width；
const windowheight=Dimensions.get（'window'）.height；
函数isSmall（）{
如果（此窗口宽度<1307）{
返回true；
}
返回false；
}
类头扩展组件{
render（）{
返回此。isSmall（）？：
}
}
//导出默认连接（mapStateToProps，第页）；
导出默认标题；
根据React文档：，
挂钩
只能在功能组件内部使用

大致如此

import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function isSmall() {
if(this.windowWidth < 1307){
    return true;
  }
  return false;
}

class Header  extends Component {

render() {
    return this.isSmall() ? <SmallHeader/> : <BigHeader/> 
    }
}

// export default connect(mapStateToProps, page);
export default Header;

import React，{useState}来自“React”；
从“react native”导入{Dimensions}
const windowWidth=Dimensions.get（'window'）.width；
const windowheight=Dimensions.get（'window'）.height；
函数示例（）{
const[windowWidth，setWindowWidth]=useState（window.innerWidth）；
//归还某物
返回(
);
}
如果你想使用钩子（包括自定义钩子），你必须从功能组件中使用它们，下面是你的带有自定义钩子和头的代码，头是一个功能组件，而不是一个类：

import React, { useState } from 'react';
import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function Example() {

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  //Return something
  return (
    <div>

    </div>
  );
}

import React，{useState，useffect}来自“React”；
从'react redux'导入{connect}；
从“./BigHeader”导入BigHeader；
从“./SmallHeader”导入SmallHeader；
常量useWindowWidth=（）=>{
函数determinewith（）{
常量宽度=window.innerWidth；
设置窗口宽度（宽度）；
}
常量[windowWidth，setWindowWidth]=useState(
窗口宽度
);
useffect（（）=>{
window.addEventListener（'resize'，determinateWidth）；
返回函数（）{
window.removeEventListener（'resize'，determinatewidth）；
};
},[]);
返回窗口宽度；
};
函数useIsSmall（）{
const windowWidth=useWindowWidth（）；
如果（窗宽<1307）{
返回true；
}
返回false；
}
功能标题（道具）{
const isSmall=useIsSmall（）；
返回isSmall？：；
}
//导出默认连接（mapStateToProps，第页）；
导出默认标题；
钩子通常需要是功能组件的一部分。钩子必须由功能组件调用。
import React, { useState } from 'react';
import { Dimensions } from 'react-native'
const windowWidth = Dimensions.get('window').width;
const windowheight = Dimensions.get('window').height;

function Example() {

  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  //Return something
  return (
    <div>

    </div>
  );
}

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import BigHeader from './bigHeader';
import SmallHeader from './smallHeader';

const useWindowWidth = () => {
  function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
  }
  const [windowWidth, setWindowWidth] = useState(
    window.innerWidth
  );
  useEffect(() => {
    window.addEventListener('resize', determineWidth);

    return function() {
      window.removeEventListener('resize', determineWidth);
    };
  },[]);
  return windowWidth;
};

function useIsSmall() {
  const windowWidth = useWindowWidth();
  if (windowWidth < 1307) {
    return true;
  }
  return false;
}

function Header(props) {
  const isSmall = useIsSmall();
  return isSmall ? <SmallHeader /> : <BigHeader />;
}

// export default connect(mapStateToProps, page);
export default Header;