调整浏览器窗口大小时,如何让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示例中的):
Block
Pin
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:
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 });
有没有更“反应”的方式来做到这一点?
使用React Hooks:
您可以定义一个自定义的Hook来监听window resize事件,如下所示:
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。
使用React类:
您可以在componentDidMount中进行监听,类似于该组件,它仅显示窗口尺寸(如<span>Window size: 1024 x 768</span>):
<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); } }