react16 ref 自适应宽高

class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: props.width || -1,
      height: props.height || -1,
    }
  }

  componentDidMount() {
    this.updateSize();
    window.addEventListener('resize', () => this.updateSize());
  }

  componentWillUnmount() {
    window.removeEventListener('resize', () => this.updateSize());
  }

  updateSize() {
    try {
      const parentDom = ReactDOM.findDOMNode(this).parentNode;
      let { width, height } = this.props;
      //如果props没有指定height和width就自适应
      if (!width) {
        width = parentDom.offsetWidth;
      }
      if (!height) {
        height = width * 0.38;
      }
      this.setState({ width, height });
    } catch (ignore) {
    }
  }

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

ReactDOM.render(
  <Card/>,
  document.getElementById('root')
);

/*
 * @Author: songxue
 * @Date: 2018-12-18 13:54:44
 * @Last Modified by: yehq
 * @Last Modified time: 2018-12-19 13:51:23
 * @Module Name: modal 框  自适应 最大高度是屏幕的90%
 */
import React from 'react';
import PropTypes from 'prop-types';
import { ModalProps } from './types';

import { Modal as AntdModal } from 'antd';

export interface IState {
    scroll: React.CSSProperties,
    width?: number,
    height?: number,
}

class Modal extends React.PureComponent<ModalProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            scroll: {},
            width: props.width || -1,
            height: props.height || -1,
        }
        this.refParentDom = React.createRef();
        this.refChildDom = React.createRef();

    }
    private refParentDom: React.RefObject<HTMLDivElement>;
    private refChildDom: React.RefObject<HTMLDivElement>;


    static propsTypes = {
        visible: PropTypes.bool,
    }
    static defaultProps = {
        centered: true
    }
    private handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (this.props.onOk) this.props.onOk(e);
    }

    private handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (this.props.onCancel) this.props.onCancel(e);
    }
    componentDidMount() {
        this.updateSize();
        window.addEventListener('resize', this.updateSize);
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.updateSize);
    }
    componentWillReceiveProps({ visible }) {
        console.log(visible,"visible")
        if (visible) {
            this.updateSize();
        }
    }
    updateSize = () => {
        //监听屏幕高度
        //获取content 高度 如果大于屏幕高度 90% 则加滚动条
        const refChildDom = this.refChildDom.current;
        const clientHeight = document.body.clientHeight;
        let { height } = this.props;
        if (!height) {
            height = clientHeight * 0.9 - 110;
            if (refChildDom && refChildDom.offsetHeight < height) {
                height = refChildDom.offsetHeight;
            }
        }
        this.setState({ height });
    }
    render() {
        //centered 默认垂直居中
        const {
            visible,
            children,
            centered,
            style,
            ...resProps
        } = this.props;
        const styleObj = this.state.scroll.overflow === 'scroll' ?
                {
                    width: this.state.width,
                    height: this.state.height,
                    ...this.state.scroll
                } :
                this.state.scroll;
        return (
            <AntdModal
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                centered={centered}
                {...resProps}
                style={{ paddingBottom: 'inherit', ...style }}
            >
                <div
                    ref={this.refParentDom}
                    style={styleObj}
                >
                    <div ref={this.refChildDom}>
                        {children}
                    </div>
                </div>
            </AntdModal>
        )
    }
}

export default Modal;