如何在jsx中使用if-else进行媒体查询

Question

import React, { Component, useState } from 'react'
class input extends Component {
constructor(props) {
super(props)
this.state = {
show:true
};
ShowHide=()=>{
this.setState({
show:!this.state.show
});
render() {

return (
<>
{this.state.show} ?
<div>
<h1>Hello world</h1>
</div>
:
<div>
<h1>How are you?</h1>
</div>
<button onClick={this.ShowHide()}>Button</button>
}
</>
}

导出默认输入

如何使用那些jsx进行媒体查询(桌面版和移动版(我需要知道如何使用sample.js(而不是css(。如何在移动版渲染中使用jsx部分。在桌面版中，我必须同时显示消息Hello world和how are you？。在移动版本中，我必须使用隐藏和显示。

Answer 1

您可以看看这个名为react-responsive的npm包：https://www.npmjs.com/package/react-responsive

它将允许你做这样的事情：

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })

return (
<div>
<h1>Device Test!</h1>
{isTabletOrMobile ? <p>You are on a tablet or a mobile p</p> : <p>You're on desktop</p>}
</div>
)
}