@withViewPort 装饰器如何在 React 中工作？

Question

我正在阅读这个装饰器并将 @withViewPort 用法作为 :

import React from 'react';
import withViewport from 'react-decorators/withViewport';

@withViewport
class MyComponent {
  render() {
    let { width, height } = this.props.viewport;
    return <div>Viewport: {width + 'x' + height}</div>;
  }
}

React.render(<MyComponent />, document.body);

@withViewPort 装饰器是如何工作的？调整 window 大小时，它是否有状态和这些状态变化？

Answer 1

它是一个高阶组件，可将侦听 window.resize 的处理程序添加到您的组件。来源：https://github.com/kriasoft/react-decorators/blob/master/src/withViewport.js

装饰器和做的一样：

const MyComposedComponent = withComponent(MyComponent);
render(<MyComposedComponent />, document.body);

@withViewPort 装饰器如何在 React 中工作？

How does @withViewPort decorator work in React?

javascript

reactjs