node.js - React 响应式媒体查询不改变

Question

我正在使用 React responsive 来创建媒体查询，因此图像大小会发生变化。但是，它没有做我想做的。它会在屏幕上保留较大的第一个图像，并且不会按照我指定的规则切换到另一个图像。是否有不同的编码方式？

从'react'导入React，{Component}；从“ react 响应”导入 MediaQuery

class Name extends Component {

    render(){
        return(
          <>
            <div>
            <MediaQuery Nameimg={this.props.Nameimg} minWidth={900}>
            <img height="15vh" className="name_image" src={this.props.Nameimg} alt="name"/>
            </MediaQuery>
            <MediaQuery Nameimg={this.props.Nameimg} maxWidth={899}>
            <img height="8vh" className="name_image2" src={this.props.Nameimg} alt="name2"/>
            </MediaQuery>
          </div>
          </>
        )
    }
}
  export default Name;

Answer 1

这是一个简单的修复，希望对其他人也有用。但我相信它不起作用，因为您需要使用包 https://github.com/contra/react-responsive/blob/master/src/mediaQuery.ts#L9 定义的设置宽度

我使用了 1224 的 minWidth 和 maxWidth，这成功了。