按比例缩放DIV

class ResponsiveDiv extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
         props.width||-1,
        height: props.height||-1,
      }
    }
  
    componentDidMount() {
      this.updateSize();
      window.addEventListener('resize', this.updateSize.bind(this));
    }
  
    componentWillUnmount() {
      window.removeEventListener('resize', this.updateSize.bind(this));
    }
  
    updateSize() {
      try {
        const parentDom = ReactDOM.findDOMNode(this).parentNode;
        let { width, height } = this.props;
        if (!width) {
          width = parentDom.offsetWidth;
        }
        if (!height) {
          height = width * 0.38;
        }
        this.setState({ width, height });
      } catch (ignore) {}
    }

    render() {
      return (
          <div className="test" style={{this.state.width,height:this.state.height}} >
            {`${this.state.width} x ${this.state.height}`}
            </div>
      );
    }
}

ReactDOM.render(
  <ResponsiveDiv />,
  document.getElementById('root')
);
原文地址:https://www.cnblogs.com/camille666/p/scale_div_by_react.html