我想根据浏览器窗口的当前大小设置组件的状态。已使用服务器端呈现(React + Redux)。我正在考虑使用Redux商店作为粘合剂 - 只需在调整大小时更新商店。 有没有其他/更好的解决方案不涉及Redux。 感谢。
class FocalImage extends Component {
// won't work - the backend rendering is used
// componentDidMount() {
// window.addEventListener(...);
//}
//componentWillUnmount() {
// window.removeEventListener('resize' ....);
//}
onresize(e) {
//
}
render() {
const {src, className, nativeWidth, nativeHeight} = this.props;
return (
<div className={cn(className, s.focalImage)}>
<div className={s.imageWrapper}>
<img src={src} className={_compare_ratios_ ? s.tall : s.wide}/>
</div>
</div>
);
}
}
答案 0 :(得分:5)
我有一个可以传递函数的resize helper组件,如下所示:
class ResizeHelper extends React.Component {
static propTypes = {
onWindowResize: PropTypes.func,
};
constructor() {
super();
this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
if (this.props.onWindowResize) {
window.addEventListener('resize', this.handleResize);
}
}
componentWillUnmount() {
if (this.props.onWindowResize) {
window.removeEventListener('resize', this.handleResize);
}
}
handleResize(event) {
if ('function' === typeof this.props.onWindowResize) {
// we want this to fire immediately the first time but wait to fire again
// that way when you hit a break it happens fast and only lags if you hit another break immediately
if (!this.resizeTimer) {
this.props.onWindowResize(event);
this.resizeTimer = setTimeout(() => {
this.resizeTimer = false;
}, 250); // this debounce rate could be passed as a prop
}
}
}
render() {
return (<div />);
}
}
然后,任何需要在调整大小时执行某些操作的组件都可以像这样使用它:
<ResizeHelper onWindowResize={this.handleResize} />
您还可能需要在componentDidMount上调用传递的函数一次以设置UI。由于在服务器上永远不会调用componentDidMount和componentWillUnmount,因此在我的同构App中完美运行。
答案 1 :(得分:2)
我的解决方案是处理最高级别的resize事件并将其传递给我的最顶级组件,您可以看到完整代码here,但要点是:
let prevBrowserWidth
//re-renders only if container size changed, good place to debounce
let renderApp = function() {
const browserWidth = window.document.body.offsetWidth
//saves re-render if nothing changed
if (browserWidth === prevBrowserWidth) {
return
}
prevBrowserWidth = browserWidth
render(<App browserWidth={browserWidth} />, document.getElementById('root'))
}
//subscribing to resize event
window.addEventListener('resize', renderApp)
它显然可以在没有Redux的情况下工作(我仍然使用Redux),我认为与Redux一样容易。与具有组件的解决方案相比,此解决方案的优势在于,您的反应组件完全无法与此相关,并且与浏览器宽度一样,与传递的任何其他道具一样。所以这是处理副作用的本地化地方。缺点是它只给你一个属性而不是事件本身,所以你不能真正依赖它来触发渲染函数之外的东西。
除此之外,您还可以使用以下内容解决服务器端渲染问题:
import ExecutionEnvironment from 'exenv'
//...
componentWillMount() {
if (ExecutionEnvironment.canUseDOM) {
window.addEventListener(...);
}
}