使用React重新调整浏览器的渲染视图
调整浏览器窗口大小时,如何让React重新渲染视图?
背景
我有一些块要在页面上单独布局,但是我还希望它们在浏览器窗口更改时进行更新。最终结果将类似于BenHolland的 Pinterest布局,但使用React编写的不仅是jQuery。我还有一段路要走。
码
这是我的应用程序:
var MyApp = React.createClass({ //does the http get from the server
loadBlocksFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) {
this.setState({data: data.events});
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
this.loadBlocksFromServer();
},
render: function() {
return (
<div>
<Blocks data={this.state.data}/>
</div>
);
}
});
React.renderComponent(
<MyApp url="url_here"/>,
document.getElementById('view')
)
然后,我有了Block
组件(相当于Pin
上面的Pinterest示例中的):
var Block = React.createClass({ render: function() {
return (
<div class="dp-block" style={{left: this.props.top, top: this.props.left}}>
<h2>{this.props.title}</h2>
<p>{this.props.children}</p>
</div>
);
}
});
和的清单/集合Blocks
:
var Blocks = React.createClass({ render: function() {
//I've temporarily got code that assigns a random position
//See inside the function below...
var blockNodes = this.props.data.map(function (block) {
//temporary random position
var topOffset = Math.random() * $(window).width() + 'px';
var leftOffset = Math.random() * $(window).height() + 'px';
return <Block order={block.id} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;
});
return (
<div>{blockNodes}</div>
);
}
});
题
我应该添加jQuery的窗口调整大小吗?如果是这样,在哪里?
$( window ).resize(function() { // re-render the component
});
有没有更“反应”的方式来做到这一点?
回答:
您可以定义一个自定义的Hook来监听window resize
事件,如下所示:
import React, { useLayoutEffect, useState } from 'react';function useWindowSize() {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
function updateSize() {
setSize([window.innerWidth, window.innerHeight]);
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
return size;
}
function ShowWindowDimensions(props) {
const [width, height] = useWindowSize();
return <span>Window size: {width} x {height}</span>;
}
这样做的好处是逻辑被封装,您可以在要使用窗口大小的任何位置使用此Hook。
您可以在componentDidMount中进行监听,类似于该组件,它仅显示窗口尺寸(如<span>Window size: 1024 x
768</span>):
import React from 'react';class ShowWindowDimensions extends React.Component {
state = { width: 0, height: 0 };
render() {
return <span>Window size: {this.state.width} x {this.state.height}</span>;
}
updateDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
};
componentDidMount() {
window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimensions);
}
}
以上是 使用React重新调整浏览器的渲染视图 的全部内容, 来源链接: utcz.com/qa/402685.html