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

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

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

function determineWidth() {
    const width = window.innerWidth;
    setWindowWidth(width);
    isSmall(width);
}

useEffect(() => {
    window.addEventListener("resize", determineWidth);

    return function() {
        window.removeEventListener("resize", determineWidth);
    }
})
class Header  extends Component {

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

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

我从这条线得到一个错误const [windowWidth, setWindowWidth] = useState(window.innerWidth);

我试图在屏幕 < 1307 时返回一个移动/较小的标题，并在它高于该标题时返回一个不同的标题。

4

4 回答 4

1

如果你想使用钩子（包括自定义钩子），你必须从功能组件中使用它们，这里是你的带有自定义钩子的代码，而 Header 是一个功能组件而不是一个类：

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;
于 2019-09-18T08:23:05.467 回答
0

根据 React 文档：Hooks， hooks只能在功能组件内部使用

大致是这样的

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>
  );
}
于 2019-09-18T08:18:16.300 回答
0

你不能使用hooks外面的功能。

能否请您将代码移动到const [windowWidth, setWindowWidth] = useState(window.innerWidth);函数中，然后尝试一下。

于 2019-09-18T08:13:18.477 回答
0

尝试使用 React Native 中的 Dimensions，这段代码应该可以工作：您还可以在每次调用函数 isSmall() 时更新 windowWidth 值：

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;
于 2019-09-18T08:14:23.307 回答