Javascript 如何使用react根据屏幕大小更改布局
我希望能够改变我的布局,当我点击一个给定的屏幕大小,这样我就可以改变我的网站在点击移动视图时的外观 当前,我的react站点使用包水平滚动 我尝试用react responsive包实现这一点,它允许我运行媒体查询,但这两个包之间似乎存在冲突 所以我希望我的网站在全屏(桌面和桌面)时水平滚动,然后在移动视图中从上到下滚动。我该怎么做Javascript 如何使用react根据屏幕大小更改布局,javascript,reactjs,responsive-design,Javascript,Reactjs,Responsive Design,我希望能够改变我的布局,当我点击一个给定的屏幕大小,这样我就可以改变我的网站在点击移动视图时的外观 当前,我的react站点使用包水平滚动 我尝试用react responsive包实现这一点,它允许我运行媒体查询,但这两个包之间似乎存在冲突 所以我希望我的网站在全屏(桌面和桌面)时水平滚动,然后在移动视图中从上到下滚动。我该怎么做 class Home extends React.Component{ constructor(props) { super(props); thi
class Home extends React.Component{
constructor(props) {
super(props);
this.state = {};
}
componentWillMount() {
this.setState({
home: projectsData.filter( p => p.name === "homepage" ),
galleryImages: [
ImgOne,
ImgTwo,
ImgThree,
ImgFour,
ImgFive,
ImgSix
]
});
}
render(){
const test = { color: "black", position: "fixed" }
return(
<div className="row">
<Responsive minWidth={992}>
<HorizontalScroll reverseScroll={true}>
<Header />
<SplashScreen />
<CopyText />
</HorizontalScroll>
</Responsive>
</div>
);
}
}
class Home扩展了React.Component{
建造师(道具){
超级(道具);
this.state={};
}
组件willmount(){
这是我的国家({
主页:projectsData.filter(p=>p.name==“主页”),
画廊图片:[
我走了,
ImgTwo,
三,
四分钟,
ImgFive,
ImgSix
]
});
}
render(){
常量测试={颜色:“黑色”,位置:“固定”}
返回(
);
}
}
注意:我知道水平滚动包不支持按百分比调整大小。我建议查看媒体查询。这是一个向你展示基本知识的短片 您可以设置一个阈值,该阈值将在这些条件下触发单独的样式。当您希望您的UI以不同的大小执行不同的操作时,它会非常有用
@media only screen
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) {
//css goes here with whatever css you want to fire at this threshold
}
我不熟悉HorizontalScroll组件,但我可以给您一个代码示例,说明如何使用React根据屏幕大小更改布局
class WindowWidth extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onResize = this.onResize.bind(this);
}
render() {
return this.props.children({ width: this.state.width });
}
getWindowWidth() {
return Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
);
}
onResize() {
window.requestAnimationFrame(() => {
this.setState({
width: this.getWindowWidth()
});
});
}
componentWillMount() {
this.setState({
width: this.getWindowWidth()
});
}
componentDidMount() {
window.addEventListener("resize", this.onResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.onResize);
}
}
const Vertical = props => <div> Vertical component: {props.children}</div>;
const Horizontal = props => <div> Horizontal component: {props.children}</div>;
ReactDOM.render(
<WindowWidth>
{({ width }) => {
if (width >= 992) {
return <Horizontal>{width}px</Horizontal>;
}
return <Vertical>{width}px</Vertical>;
}}
</WindowWidth>,
document.querySelector("#react-app")
);
类WindowWidth扩展了React.Component{
建造师(道具){
超级(道具);
this.state={};
this.onResize=this.onResize.bind(this);
}
render(){
返回this.props.children({width:this.state.width});
}
getWindowWidth(){
返回Math.max(
document.documentElement.clientWidth,
window.innerWidth | | 0
);
}
onResize(){
window.requestAnimationFrame(()=>{
这是我的国家({
宽度:this.getWindowWidth()
});
});
}
组件willmount(){
这是我的国家({
宽度:this.getWindowWidth()
});
}
componentDidMount(){
window.addEventListener(“resize”,this.onResize);
}
组件将卸载(){
removeEventListener(“resize”,this.onResize);
}
}
constvertical=props=>垂直组件:{props.children};
const Horizontal=props=>水平组件:{props.children};
ReactDOM.render(
{({width})=>{
如果(宽度>=992){
返回{width}px;
}
返回{width}px;
}}
,
document.querySelector(“react app”)
);
从“React”导入React;
从“道具类型”导入道具类型;
从“重新组合/组合”导入组合;
从“@material ui/core/styles”导入{withStyles}”;
从“@material ui/core/Paper”导入纸张;
从“@material ui/core/Hidden”导入隐藏项;
从“@material ui/core/withWidth”导入Width;
从“@material ui/core/Typography”导入排版;
常量样式=主题=>({
根目录:{
flexGrow:1,
},
容器:{
显示:“flex”,
},
论文:{
填充:theme.space.unit*2,
textAlign:'中心',
颜色:theme.palete.text.secondary,
flex:“10自动”,
边距:theme.space.unit,
},
});
功能断点向上(道具){
常量{classes}=props;
返回(
当前宽度:{props.width}
xsUp
淫秽
mdUp
lgUp
xlUp
);
}
断点up.propTypes={
类:PropTypes.object.isRequired,
宽度:PropTypes.string.isRequired,
};
导出默认组合(
用样式(样式),
withWidth(),
)(向上);
也许您可以在componentDidMount中做一些工作,如以下回答所示:这将应用新的CSS,但如果他想要一个完全不同的DOM,这不会让他走多远。
import React from 'react';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Hidden from '@material-ui/core/Hidden';
import withWidth from '@material-ui/core/withWidth';
import Typography from '@material-ui/core/Typography';
const styles = theme => ({
root: {
flexGrow: 1,
},
container: {
display: 'flex',
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
flex: '1 0 auto',
margin: theme.spacing.unit,
},
});
function BreakpointUp(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Typography variant="subtitle1">Current width: {props.width}</Typography>
<div className={classes.container}>
<Hidden xsUp>
<Paper className={classes.paper}>xsUp</Paper>
</Hidden>
<Hidden smUp>
<Paper className={classes.paper}>smUp</Paper>
</Hidden>
<Hidden mdUp>
<Paper className={classes.paper}>mdUp</Paper>
</Hidden>
<Hidden lgUp>
<Paper className={classes.paper}>lgUp</Paper>
</Hidden>
<Hidden xlUp>
<Paper className={classes.paper}>xlUp</Paper>
</Hidden>
</div>
</div>
);
}
BreakpointUp.propTypes = {
classes: PropTypes.object.isRequired,
width: PropTypes.string.isRequired,
};
export default compose(
withStyles(styles),
withWidth(),
)(BreakpointUp);